Vebego Component Library

USP List 

<ul class="mol-usp-list">
    <li>
        <span class="atm-icon  fas fa-check-circle   "></span>
        <div>
            <div class="atm-heading h5">Advies op maat</div>

            Wij ontzorgen uw organisatie en denken mee.
        </div>
    </li>
    <li>
        <span class="atm-icon  fas fa-check-circle   "></span>
        <div>
            <div class="atm-heading h5">Gedreven professionals</div>

            Met meer dan 75 jaar ervaring staan onze professionals voor u klaar.
        </div>
    </li>
    <li>
        <span class="atm-icon  fas fa-check-circle   "></span>
        <div>
            <div class="atm-heading h5">Positieve bijdrage</div>

            Iedere dag dragen we bij aan een betere wereld.
        </div>
    </li>
    <li>
        <span class="atm-icon  fas fa-check-circle   "></span>
        <div>
            <div class="atm-heading h5">Positieve bijdrage</div>

            Iedere dag dragen we bij aan een betere wereld.
        </div>
    </li>
    <li>
        <span class="atm-icon  fas fa-check-circle   "></span>
        <div>
            <div class="atm-heading h5">Positieve bijdrage</div>

            Iedere dag dragen we bij aan een betere wereld.
        </div>
    </li>
</ul>
 
<ul class="mol-usp-list">
    {{#each items}}
        <li>
            {{render '@icon' @root.icon }}
            <div>
                {{render '@heading' heading merge=true }}
                {{text }}
            </div>
        </li>
    {{/each}}
</ul>
 
{
  "items": [
    {
      "heading": {
        "tag": "div",
        "modifier": "h5",
        "text": "Advies op maat"
      },
      "text": "Wij ontzorgen uw organisatie en denken mee."
    },
    {
      "heading": {
        "tag": "div",
        "modifier": "h5",
        "text": "Gedreven professionals"
      },
      "text": "Met meer dan 75 jaar ervaring staan onze professionals voor u klaar."
    },
    {
      "heading": {
        "tag": "div",
        "modifier": "h5",
        "text": "Positieve bijdrage"
      },
      "text": "Iedere dag dragen we bij aan een betere wereld."
    },
    {
      "heading": {
        "tag": "div",
        "modifier": "h5",
        "text": "Positieve bijdrage"
      },
      "text": "Iedere dag dragen we bij aan een betere wereld."
    },
    {
      "heading": {
        "tag": "div",
        "modifier": "h5",
        "text": "Positieve bijdrage"
      },
      "text": "Iedere dag dragen we bij aan een betere wereld."
    }
  ],
  "icon": {
    "style": "fas",
    "icon": "fa-check-circle"
  }
}
  • Content: 
    .mol-usp-list {
    li {
        @apply grid;
        @apply grid-cols-2;
        grid-template-columns: 40px auto;
        @apply grid-rows-1;
        @apply px-3;
        @apply py-5;

        &.js--clickable {
            @apply hover:shadow-xl;
        }

        .atm-icon {
            @apply mt-1;
            @apply text-cta;
        }

        .atm-heading {
            @apply mb-0;
        }
    }
}
  • URL: /components/raw/usp-list/usp-list.css
  • Filesystem Path: src\components\03-molecules\usp-list\usp-list.css
  • Size: 434 Bytes

No notes defined.