Component Library

List of links 

<ul class="link-list ">
    <li class="link-list__item">
        <a href="#" title="Link title 1" target="" class="link   " property="url">Link text 1</a>

    </li>
    <li class="link-list__item">
        <a href="#" title="Link title 2" target="" class="link   " property="url">Link text 2</a>

    </li>
    <li class="link-list__item">
        <a href="#" title="Link title 3" target="" class="link   " property="url">Link text 3</a>

    </li>
</ul>
 
<ul class="link-list {{ modifier }}">
    {{#each list}}
        <li class="link-list__item">
            {{ render '@link' this }}
        </li>
    {{/each}}
</ul>
 
{
  "list": [
    {
      "url": "#",
      "text": "Link text 1",
      "title": "Link title 1"
    },
    {
      "url": "#",
      "text": "Link text 2",
      "title": "Link title 2"
    },
    {
      "url": "#",
      "text": "Link text 3",
      "title": "Link title 3"
    }
  ]
}
  • Content: 
    .link-list {
    list-style: none;
    margin: 0;
    padding: 0;

    &__item + &__item {
        margin-top: 5px;
    }

    &--horizontal {
        .link-list__item {
            display: inline-block;
        }
    }
}
  • URL: /components/raw/link-list/link-list.css
  • Filesystem Path: src/02-molecules/link-list/link-list.css
  • Size: 223 Bytes

There are no notes for this item.