UHasselt Component Library

USP List 

<!-- Usp List Red -->
<div class="usp-list red">
    <ul class="fa-ul">
        <li><span class="fa-li"><span class="icon fal fa-check   " aria-hidden="true"></span></span>A USP for UHasselt</li>
        <li><span class="fa-li"><span class="icon fal fa-check   " aria-hidden="true"></span></span>Another USP for UHasselt</li>
        <li><span class="fa-li"><span class="icon fal fa-check   " aria-hidden="true"></span></span>And a third USP for UHasselt</li>
    </ul>
</div>


<!-- Usp List White -->
<div class="usp-list white">
    <ul class="fa-ul">
        <li><span class="fa-li"><span class="icon fal fa-check   " aria-hidden="true"></span></span>A USP for UHasselt</li>
        <li><span class="fa-li"><span class="icon fal fa-check   " aria-hidden="true"></span></span>Another USP for UHasselt</li>
        <li><span class="fa-li"><span class="icon fal fa-check   " aria-hidden="true"></span></span>And a third USP for UHasselt</li>
    </ul>
</div>


<div class="usp-list {{modifier}}">
    <ul class="fa-ul">
        {{#each items}}
            <li><span class="fa-li">{{ render '@icon' @root.icon  }}</span>{{text}}</li>
        {{/each}}
    </ul>
</div>
 
/* Usp List Red */
{
  "items": [
    {
      "text": "A USP for UHasselt"
    },
    {
      "text": "Another USP for UHasselt"
    },
    {
      "text": "And a third USP for UHasselt"
    }
  ],
  "icon": {
    "style": "fal",
    "icon": "fa-check"
  },
  "modifier": "red"
}


/* Usp List White */
{
  "items": [
    {
      "text": "A USP for UHasselt"
    },
    {
      "text": "Another USP for UHasselt"
    },
    {
      "text": "And a third USP for UHasselt"
    }
  ],
  "icon": {
    "style": "fal",
    "icon": "fa-check"
  },
  "modifier": "white"
}
  • Content: 
    .usp-list {
    @apply p-8;

    &.white {
        @apply bg-white text-black;

        .fa-li {
            @apply w-auto text-green;
        }
    }

    &.red {
        @apply bg-red text-white;

        .fa-li {
            @apply w-auto text-white;
        }
    }
}
  • URL: /components/raw/usp-list/usp-list.css
  • Filesystem Path: src\components\03-molecules\usp-list\usp-list.css
  • Size: 291 Bytes

No notes defined.