Prototyping Demo

List of links: Horizontal 

<ol class="link-list link-list--horizontal">
    <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>
</ol>
 
{{> @link-list modifier="link-list--horizontal"}}
 
{
  "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 {
    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: patterns/02-molecules/link-list/link-list.css
  • Size: 201 Bytes