Vebego Component Library

Intro Text 

<div class="mol-intro-text">
    <h1 class="atm-heading ">De schoonmakers van Nederland</h1>

    <div class="atm-paragraph text-md">Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland.</div>

    <a class="atm-button atm-button-primary  button-md no-icon  ">
        <div class="button-content-wrapper">
            <span class="button-content">
                <span>Button 1</span>
                <i class="atm-icon  fal fa-arrow-right   "></i>

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

    <a class="atm-button atm-button-secondary button-md ">
        <div class="button-content-wrapper">
            <span class="button-content">
                <span>Button 2</span>
                <i class="atm-icon  far fa-long-arrow-right   "></i>

                <span class="button-underline"></span>
            </span>
        </div>
    </a>

    <a class="atm-button atm-button-secondary button-md ">
        <div class="button-content-wrapper">
            <span class="button-content">
                <span>Button 3</span>
                <i class="atm-icon  far fa-long-arrow-right   "></i>

                <span class="button-underline"></span>
            </span>
        </div>
    </a>

</div>
 
<div class="mol-intro-text">
    {{render '@heading' heading merge=true}}
    {{render '@paragraph' paragraph merge=true}}
    {{#each buttonsPrimary}}
    {{render '@button-primary' this merge=true}}
    {{/each}}
    {{#each buttonsSecondary}}
    {{render '@button-secondary' this merge=true}}
    {{/each}}
</div>
 
{
  "heading": {
    "text": "De schoonmakers van Nederland"
  },
  "paragraph": {
    "text": "Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland."
  },
  "buttonsPrimary": [
    {
      "text": "Button 1"
    }
  ],
  "buttonsSecondary": [
    {
      "text": "Button 2"
    },
    {
      "text": "Button 3"
    }
  ]
}
  • Content: 
    .mol-intro-text {
    .atm-paragraph {
        @apply mb-8;
    }

    .atm-button {
        @apply mr-4;
    }
}
  • URL: /components/raw/intro-text/intro-text.css
  • Filesystem Path: src\components\03-molecules\intro-text\intro-text.css
  • Size: 123 Bytes

No notes defined.