UHasselt Component Library

Link List Items 

<div class="link-list-items">
    <div class="head-wrap">
        <span class="icon far fa-backpack  fa-lg " aria-hidden="true"></span><span class="heading h3">
            Lessen & examens
        </span>
    </div>
    <ul>
        <li>
            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Uurroosters</span>

            </a>

        </li>
        <li>
            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Studiegids</span>

            </a>

        </li>
        <li>
            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Academische kalender</span>

            </a>

        </li>
        <li>
            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Examenrooster</span>

            </a>

        </li>
        <li>
            <a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Onderwijs- en examenreglement</span>

            </a>

        </li>
    </ul>
    <a href="#" class="button button-black ">
        <span>
            <span class="icon fal fa-envelope   " aria-hidden="true"></span>
            <span class="text">
                This is a CTA Button
            </span>
        </span>
    </a>

</div>
 
<div class="link-list-items">
    <div class="head-wrap">
        {{render '@icon' icon merge=true}}{{render '@heading' heading merge=true}}
    </div>
    <ul>
        {{#each items}}
            <li>
                {{render '@link' link merge=true}}
            </li>
        {{/each}}
    </ul>
    {{#if cta}}{{render '@button' cta merge=true}}{{/if}}
</div>
 
{
  "icon": {
    "icon": "fa-backpack",
    "size": "fa-lg"
  },
  "heading": {
    "tag": "span",
    "modifier": "h3",
    "text": "Lessen & examens"
  },
  "cta": {
    "icon": {
      "style": "fal",
      "icon": "fa-user-graduate"
    }
  },
  "items": [
    {
      "link": {
        "text": "Uurroosters"
      }
    },
    {
      "link": {
        "text": "Studiegids"
      }
    },
    {
      "link": {
        "text": "Academische kalender"
      }
    },
    {
      "link": {
        "text": "Examenrooster"
      }
    },
    {
      "link": {
        "text": "Onderwijs- en examenreglement"
      }
    }
  ]
}
  • Content: 
    .link-list-items {
    @apply bg-white shadow-2xl p-6;

    .head-wrap {
        @apply border-b border-solid border-gray pb-4 mb-6;

        .icon {
            @apply mr-4 align-text-top;
        }

        .h3 {
            @apply font-semibold;
        }
    }

    li {
        @apply mb-2;
    }

    .link {
        @apply text-black-800;

        &:hover {
            @apply text-red no-underline;
        }
    }

    .button {
        @apply mt-4;
    }
}
  • URL: /components/raw/link-list-items/link-list-items.css
  • Filesystem Path: src\components\03-molecules\link-list-items\link-list-items.css
  • Size: 498 Bytes

No notes defined.