UHasselt Component Library

Contact List 

<div class='contact-list'>
    <div class='contact-list-heading'>
        <h3 class="heading social-title">
            Social media
        </h3>
    </div>

    <div class='contact-list-block'>
        <p class='contact-list-item'>A USP for UHasselt</p>
        <p class='contact-list-item'>A USP for UHasselt</p>
        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">This is what a link looks like</span>

        </a>

    </div>

    <div class='contact-list-block-scnd'>
        <p class='contact-list-item'>A USP for UHasselt</p>
        <p class='contact-list-item'>A USP for UHasselt</p>
        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">This is what a link looks like</span>

        </a>

    </div>
</div>
 
<div class='contact-list'>
    <div class='contact-list-heading'>
        {{render '@heading' heading}}
    </div>

    <div class='contact-list-block'>
        {{#each items as |item|}}
            {{#if link}}
                {{render '@link'}}
            {{else}}
                <p class='contact-list-item'>{{item.context}}</p>
            {{/if}}
        {{/each}}
    </div>

    <div class='contact-list-block-scnd'>
        {{#each items as |item|}}
            {{#if link}}
                {{render '@link'}}
            {{else}}
                <p class='contact-list-item'>{{item.context}}</p>
            {{/if}}
        {{/each}}
    </div>
</div>
 
{
  "heading": {
    "text": "Social media",
    "tag": "h3",
    "modifier": "social-title"
  },
  "items": [
    {
      "context": "A USP for UHasselt",
      "link": false
    },
    {
      "context": "A USP for UHasselt",
      "link": false
    },
    {
      "context": "A USP for UHasselt",
      "link": true
    }
  ]
}
  • Content: 
    .contact-list {
    .contact-list-heading {
        margin-bottom: 1.5rem;
    }

    .contact-list-item {
        margin: 8px 0;
    }

    .contact-list-block-scnd {
        margin-top: 32px;
    }
}
  • URL: /components/raw/contact-list/contact-list.css
  • Filesystem Path: src\components\03-molecules\contact-list\contact-list.css
  • Size: 215 Bytes

No notes defined.