Vebego Component Library

Footer Newsletter 

<div class="mol-footer-newsletter">
    <h6 class="atm-heading ">Nieuwsbrief</h6>

    <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  ">
        <span class="button-content">
            <span>Aanmelden</span>

        </span>
        <span class="button-triangle"></span>
    </a>

</div>
 
<div class="mol-footer-newsletter">
    {{ render '@heading' heading }}
    {{ render '@input' input merge=true }}
    {{ render '@button-primary' button merge=true }}
</div>
 
{
  "heading": {
    "text": "Nieuwsbrief",
    "tag": "h6"
  },
  "button": {
    "text": "Aanmelden"
  },
  "input": {
    "label": {
      "text": "E-mailadres"
    }
  }
}
  • Content: 
    .mol-footer-newsletter
{
    .atm-form-input
    {
        @apply w-full;
        @apply mb-2;

        .form-input
        {
            @apply w-full;
        }
    }

    .atm-button
    {
        @apply w-full;
        @apply text-center;
    }
}
  • URL: /components/raw/footer-newsletter/footer-newsletter.css
  • Filesystem Path: src\components\03-molecules\footer-newsletter\footer-newsletter.css
  • Size: 270 Bytes

No notes defined.