Vebego Component Library

Newsletter Subscribe 

<div class="mol-newsletter-subscribe">
    <span class="atm-heading h5">Schrijf je in voor onze nieuwsbrief voor meer verhalen</span>

    <div class="wrapper">
        <div class="atm-form-input  ">
            <input class="form-input" type="text" id="input" name="input">
            <label class="atm-form-label form-label " for="input">E-mailadres</label>

            <span class="atm-icon form-input-error-icon far fa-times   "></span>
            <span class="atm-icon form-input-valid-icon far fa-check   "></span>
        </div>

        <a class="atm-button atm-button-primary button-md button-icon-only ">
            <span class="button-content">

                <span class="atm-icon  fal fa-long-arrow-right  fa-lg fa-fw"></span>
            </span>
        </a>

    </div>
</div>
 
<div class="mol-newsletter-subscribe">
    {{ render '@heading' heading }}
    <div class="wrapper">
        {{ render '@input' input merge=true}}
        {{ render '@button-primary--icon-only-md' button merge=true }}
    </div>
</div>
 
{
  "input": {
    "label": {
      "text": "E-mailadres"
    }
  },
  "heading": {
    "tag": "span",
    "modifier": "h5",
    "text": "Schrijf je in voor onze nieuwsbrief voor meer verhalen"
  },
  "button": {
    "modifier": "button-md",
    "icon": {
      "style": "fal",
      "icon": "fa-long-arrow-right",
      "size": "fa-lg"
    },
    "showTriangle": false
  }
}
  • Content: 
    .mol-newsletter-subscribe {
    @apply bg-cta;
    @apply p-8;

    .atm-heading {
        @apply text-white;
        @aaply bg-red;
    }

    .wrapper {
        @apply border-b border-solid border-white;
        @apply relative;

        .form-input {
            @apply bg-cta;
            @apply text-white;
            @apply border-cta;
            @apply pl-0;
            @apply w-full;
        }

        .form-label {
            @apply pl-0;
            @apply text-white;
        }

        .form-input:focus + .form-label,
        .form-input:active + .form-label,
        .form-input.filled + .form-label {
            @apply text-white;
            @apply text-opacity-60;
        }

        .atm-button {
            @apply absolute;
            @apply bottom-2;
            @apply right-0;
            @apply bg-white;
            @apply bg-opacity-60;
            @apply rounded-full;
            @apply w-8 h-8;
            @apply leading-5;

            .atm-icon {
                @apply w-auto;
                @apply text-cta;
            }
        }
    }
}
  • URL: /components/raw/newsletter-subscribe/newsletter-subscribe.css
  • Filesystem Path: src\components\03-molecules\newsletter-subscribe\newsletter-subscribe.css
  • Size: 1.1 KB

No notes defined.