Vebego Component Library

USP List 

<ul class="mol-usp-list">
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <div>
            <div class="atm-heading h5">Advies op maat</div>

            Wij ontzorgen uw organisatie en denken mee.
        </div>
    </li>
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <div>
            <div class="atm-heading h5">Gedreven professionals</div>

            Met meer dan 75 jaar ervaring staan onze professionals voor u klaar.
        </div>
    </li>
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <div>
            <div class="atm-heading h5">Positieve bijdrage</div>

            Iedere dag dragen we bij aan een betere wereld.
        </div>
    </li>
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <div>
            <div class="atm-heading h5">Positieve bijdrage</div>

            Iedere dag dragen we bij aan een betere wereld.
        </div>
    </li>
    <li>
        <i class="atm-icon  fa fa-regular fa-road   "></i>

        <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": "fa",
    "icon": "fa-regular fa-road"
  }
}
  • Content: 
    .mol-usp-list {
    @apply grid md:grid-cols-2 lg:grid-cols-3 gap-4 gap-y-12;

    li {

        > a {
            @apply hover:shadow-md;
        }
        
        .usp-list-item{
            @apply flex p-4;
            @apply transition-all duration-200;
            word-break: break-word;
    
            .atm-icon {
                @apply mt-1 mr-4 text-lg;
                @apply text-secondary-col-1;
            }
    
            .atm-heading {
                @apply mb-1;
            }
        }
        
    }
}
  • URL: /components/raw/usp-list/usp-list.css
  • Filesystem Path: src\components\03-molecules\usp-list\usp-list.css
  • Size: 553 Bytes

No notes defined.