V6 Clearleft Patterns

Link List 

<ul class="Link-list flow">
    <li class="Link-list__item">
        <a href="#" class="Twi Twi--link text-blue focus" style="">
            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
            </svg>
            <span>This is the link label</span></a>
        <p class="Link-list__description body small text-grey">
            This is the link description. It is optional but if populated will appear beneath a link to give it some context.
        </p>
    </li>
    <li class="Link-list__item">
        <a href="#" class="Twi Twi--link text-blue focus" style="">
            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
            </svg>
            <span>This is the link label</span></a>
        <p class="Link-list__description body small text-grey">
            This is the link description. It is optional but if populated will appear beneath a link to give it some context.
        </p>
    </li>
</ul>
 
<ul class="Link-list flow">
  {% for item in items %}
    <li class="Link-list__item">
      {% include '@twi' with {
        icon: 'arrow-right',
        text: item.text,
        link: item.url
      } only %}
      {% if item.description is defined %}
        <p class="Link-list__description body small text-grey">
          {{ item.description }}
        </p>
      {% endif %}
    </li>
  {% endfor %}
</ul>
 
{
  "items": [
    {
      "url": "#",
      "text": "This is the link label",
      "description": "This is the link description. It is optional but if populated will appear beneath a link to give it some context."
    },
    {
      "url": "#",
      "text": "This is the link label",
      "description": "This is the link description. It is optional but if populated will appear beneath a link to give it some context."
    }
  ]
}
  • Content: 
    .Link-list {
  list-style: none;

  &__description {
    padding-left: 2em;
  }
}
  • URL: /components/raw/link-list/link-list.css
  • Filesystem Path: src/templates/components/link-list/link-list.css
  • Size: 82 Bytes

No notes defined.