Vebego Component Library

Footer link list 

<div class="mol-footer-link-list footer-column">
      <h6 class="atm-heading ">Expertises</h6>

      <ul>
          <li>
              <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Facility Management</a>
          </li>
          <li>
              <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Exploitatie en behee</a>
          </li>
          <li>
              <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Facility services</a>
          </li>
          <li>
              <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Vastgoed</a>
          </li>
          <li>
              <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Huisvesting</a>
          </li>
      </ul>
  </div>
 
{{#if active}}
  <div class="mol-footer-link-list footer-column">
    {{render "@heading" heading}}
    <ul>
      {{#each items}}
        <li>
          {{render "@link" this merge=true}}
        </li>
      {{/each}}
    </ul>
  </div>
{{/if}}
 
{
  "active": true,
  "heading": {
    "text": "Expertises",
    "tag": "h6"
  },
  "items": [
    {
      "text": "Facility Management"
    },
    {
      "text": "Exploitatie en behee"
    },
    {
      "text": "Facility services"
    },
    {
      "text": "Vastgoed"
    },
    {
      "text": "Huisvesting"
    }
  ]
}
  • Content: 
    .mol-footer-link-list {
    @apply mb-2;

    .atm-heading {
        @apply text-lg font-normal mb-[14px] text-secondary-col-1;
    }

    .atm-link {
        @apply text-black text-sm no-underline hover:text-cta hover:underline leading-7;
    }
}
  • URL: /components/raw/footer-expertise-list/footer-expertise-list.css
  • Filesystem Path: src\components\03-molecules\footer-expertise-list\footer-expertise-list.css
  • Size: 259 Bytes

No notes defined.