Vebego Component Library

Specs List 

<div class="mol-specs-list">
    <ul>
        <li>
            <span class="atm-icon  fas fa-circle  fa-xs "></span>
            Locatie
        </li>
        <li>
            <span class="atm-icon  fas fa-circle  fa-xs "></span>
            Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak
        </li>
        <li>
            <span class="atm-icon  fas fa-circle  fa-xs "></span>
            Aantal uren
        </li>
        <li>
            <span class="atm-icon  fas fa-circle  fa-xs "></span>
            Salaris
        </li>
    </ul>
</div>
 
<div class="mol-specs-list">
    <ul>
        {{#each specs}}
        <li>
            {{render '@icon' @root.icon}}
            {{text}}
        </li>
        {{/each}}
    </ul>
</div>
 
{
  "specs": [
    {
      "text": "Locatie"
    },
    {
      "text": "Admin/Secretariaat/Onthaal, Andere, Communicatie, Logistiek, Professionele Diensten, Schoonmaak"
    },
    {
      "text": "Aantal uren"
    },
    {
      "text": "Salaris"
    }
  ],
  "icon": {
    "style": "fas",
    "icon": "fa-circle",
    "size": "fa-xs"
  }
}
  • Content: 
    .mol-specs-list {
    ul {
        @apply text-cta;

        li {
            @apply inline;

            .atm-icon {
                @apply relative;
                @apply text-gray-500;
                @apply h-1;
                @apply mx-1;
                font-size: 4px;
                top: -3px;
            }

            &:first-child {
                .atm-icon {
                    @apply hidden;
                }
            }
        }
    }
}
  • URL: /components/raw/specs-list/specs-list.css
  • Filesystem Path: src\components\03-molecules\specs-list\specs-list.css
  • Size: 485 Bytes

No notes defined.