Link lists

Link lists are used to display groups of links in a vertical (column) or horizontal (inline) alignment. These lists provide a foundation for other uses without hindering more complex use cases.

Usage

{# Import #}
{% from "@miz/components/link-lists/link-lists.twig" import LinkList as linkList %}

{# Set options #}
{% set linkListInlineOptions = {
  "layout": "inline",
  "list": [{
    "link": {
      "href": "/about/",
      "text": "About"
      }
    },{
    "link": {
      "href": "/contact/",
      "text": "Contact us"
      }
    },{
    "link": {
      "href": "/directory/",
      "text": "Directory"
      }
    }
  ]
} %}

{# Output #}
{{ linkList( linkListInlineOptions ) }}

The above code will output:

<!-- Link list output -->
<ul class="miz-link-list miz-link-list--inline">
  <li class="miz-link-list__item"><a href="/about/" class="miz-link-list__link">About</a></li>
  <li class="miz-link-list__item"><a href="/contact/" class="miz-link-list__link">Contact us</a></li>
  <li class="miz-link-list__item"><a href="/directory/" class="miz-link-list__link">Directory</a></li>
</ul>

See the View tab for each variation to see an example of how it is being used.

Options reference

The Link List can output two types of lists, but they are displayed the same; 1) an unordered list or 2) a div with <a> tags alone.

Param Default Values Description
class miz-link-list String Additional classes appended to the link list
attributes null Object Attributes to be applied to the link list
element ul String Optional parameter that will change the default containing element. Currently, div is the only other tested option.
layout false String A value of "inline" to change the layout of the list.
align false String A value of "right" will align the list to the right.
fill false Bool A value of true will stretch the list to fill its container.
list null Array Provide a list array of link objects OR provide the links option below
links null Object Provide a links array of link objects OR provide the list option above

linkListItem( options )

If you use the list array option in your Link List output, these are your options

Param Default Values Description
class miz-link-list__item String Additional classes appended to the link list
attributes null Object Attributes to be applied to the link list as key/value pairs
link null Object Provide a link object in your list array to pass along to the LinkListLink macro. See below.

All links in the List Link are output using this component.

Param Default Values Description
class miz-link-list__item String Additional classes appended to the link list
attributes null Object Attributes to be applied to the link list as key/value pairs
href # String Link value to be applied to the href attribute of the <a> tag.
text No Text String Text value to be output inside the <a> tag.
{#
 Inline Link list examples
#}

{# Import #}
  {% from "@miz/components/link-lists/link-lists.twig" import LinkList as linkList %}

{# Set options #}
  {% set linkListInlineOptions = {
    "layout": "inline",
    "list": [{
      "link": {
        "href": "/about/",
        "text": "About"
        }
      },{
      "link": {
        "href": "/contact/",
        "text": "Contact us"
        }
      },{
      "link": {
        "href": "/directory/",
        "text": "Directory"
        }
      }
    ]
  } %}

  {% set linkListInlineDivOptions = {
    "layout": "inline",
    "element": "div",
    "links": [{
      "link": {
        "href": "/about/",
        "text": "About"
        }
      },{
      "link": {
        "href": "/contact/",
        "text": "Contact us"
        }
      },{
      "link": {
        "href": "/directory/",
        "text": "Directory"
        }
      }
    ]
  } %}


  {% set linkListInlineOptionsRight = {
    "layout": "inline",
    "align": "right",
    "list": [{
      "link": {
        "href": "/about/",
        "text": "About"
        }
      },{
      "link": {
        "href": "/contact/",
        "text": "Contact us"
        }
      },{
      "link": {
        "href": "/directory/",
        "text": "Directory"
        }
      }
    ]
  } %}

  {% set linkListInlineDivOptionsRight = {
    "layout": "inline",
    "element": "div",
    "align": "right",
    "links": [{
      "link": {
        "href": "/about/",
        "text": "About"
        }
      },{
      "link": {
        "href": "/contact/",
        "text": "Contact us"
        }
      },{
      "link": {
        "href": "/directory/",
        "text": "Directory"
        }
      }
    ]
  } %}

  {% set linkListInlineOptionsFill = {
    "layout": "inline",
    "fill": true,
    "list": [{
      "link": {
        "href": "/about/",
        "text": "About"
        }
      },{
      "link": {
        "href": "/contact/",
        "text": "Contact us"
        }
      },{
      "link": {
        "href": "/directory/",
        "text": "Directory"
        }
      }
    ]
  } %}

  {% set linkListInlineDivOptionsFill = {
    "layout": "inline",
    "element": "div",
    "fill": true,
    "links": [{
      "link": {
        "href": "/about/",
        "text": "About"
        }
      },{
      "link": {
        "href": "/contact/",
        "text": "Contact us"
        }
      },{
      "link": {
        "href": "/directory/",
        "text": "Directory"
        }
      }
    ]
  } %}

{# Output #}
  <h3>Inline</h3>

  <h4>Default</h4>

  {{ linkList( linkListInlineOptions ) }}

  {{ linkList( linkListInlineDivOptions ) }}

  <h4>Right</h4>

  {{ linkList( linkListInlineOptionsRight ) }}

  {{ linkList( linkListInlineDivOptionsRight ) }}

  <h4>Fill</h4>

  {{ linkList( linkListInlineOptionsFill ) }}

  {{ linkList( linkListInlineDivOptionsFill ) }}
<h3>

    Inline</h3>

<h4>Default</h4>

<ul class="miz-link-list miz-link-list--inline">
    <li class="miz-link-list__item"><a href="/about/" class="miz-link-list__link">About</a></li>
    <li class="miz-link-list__item"><a href="/contact/" class="miz-link-list__link">Contact us</a></li>
    <li class="miz-link-list__item"><a href="/directory/" class="miz-link-list__link">Directory</a></li>
</ul>

<div class="miz-link-list miz-link-list--inline">
    <a href="/about/" class="miz-link-list__link">About</a>
    <a href="/contact/" class="miz-link-list__link">Contact us</a>
    <a href="/directory/" class="miz-link-list__link">Directory</a>
</div>

<h4>Right</h4>

<ul class="miz-link-list miz-link-list--inline miz-link-list--right">
    <li class="miz-link-list__item"><a href="/about/" class="miz-link-list__link">About</a></li>
    <li class="miz-link-list__item"><a href="/contact/" class="miz-link-list__link">Contact us</a></li>
    <li class="miz-link-list__item"><a href="/directory/" class="miz-link-list__link">Directory</a></li>
</ul>

<div class="miz-link-list miz-link-list--inline miz-link-list--right">
    <a href="/about/" class="miz-link-list__link">About</a>
    <a href="/contact/" class="miz-link-list__link">Contact us</a>
    <a href="/directory/" class="miz-link-list__link">Directory</a>
</div>

<h4>Fill</h4>

<ul class="miz-link-list miz-link-list--inline miz-link-list--fill">
    <li class="miz-link-list__item"><a href="/about/" class="miz-link-list__link">About</a></li>
    <li class="miz-link-list__item"><a href="/contact/" class="miz-link-list__link">Contact us</a></li>
    <li class="miz-link-list__item"><a href="/directory/" class="miz-link-list__link">Directory</a></li>
</ul>

<div class="miz-link-list miz-link-list--inline miz-link-list--fill">
    <a href="/about/" class="miz-link-list__link">About</a>
    <a href="/contact/" class="miz-link-list__link">Contact us</a>
    <a href="/directory/" class="miz-link-list__link">Directory</a>
</div>
/* No context defined for this component. */
  • Content:
    ///
    // Link list
    // Block
    .miz-link-list {
      position: relative;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    /* Elements */
    
    // Link list item
    // Element
    .miz-link-list__item {
      flex: 0 1 auto;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      display: flex;
      flex-wrap: wrap;
    }
    
    //
    // Link list link
    // Element
    //
    // Link list links work as a direct child element of .miz-link-list OR
    // as a grandchild sitting inside the .miz-link-list__item
    .miz-link-list__link {
      padding: $miz-space-inset-squish-default;
      text-decoration: none;
    
      &:hover {
        background-color: $miz-black-100; // Temporary, should call a default hover color
      }
    }
    
    // When link is a direct child of list, disallow grow
    .miz-link-list > .miz-link-list__link {
      flex: 0 1 auto;
    }
    
    // When link is a direct child of a list item, allow grow
    .miz-link-list__item > .miz-link-list__link {
      flex: 1 1 auto;
    }
    
    /* Modifiers */
    
    // Small list
    .miz-link-list--sm {
      font-size: $miz-font-size-sm;
      font-weight: $miz-font-weight-bold;
    }
    
    // Large list
    .miz-link-list--lg {
      font-size: $miz-font-size-lg;
    }
    
    // Inline link list
    // Changes default flex column to a flex row
    .miz-link-list--inline {
      align-content: center;
      flex-flow: row wrap;
      align-items: stretch;
    
      // Adjust each link to align to the center of the row
      // if its a child of the list
      > .miz-link-list__link {
        align-self: center;
      }
    }
    
    // Right align/justify the list
    .miz-link-list.miz-link-list--right {
      align-items: flex-end;
    }
    
    // Inline version of right align/justify
    .miz-link-list--inline.miz-link-list--right {
      align-items: stretch;
      justify-content: flex-end;
    }
    
    // Make the list fill its space
    .miz-link-list.miz-link-list--fill {
      align-items: stretch;
    }
    
    // Inline version of fill
    .miz-link-list--inline.miz-link-list--fill {
      align-items: stretch;
      justify-content: space-between;
    
      > * {
        flex: 1 0 auto;
      }
    }
    
  • URL: /components/raw/miz-link-lists/_link-lists.scss
  • Filesystem Path: fractal/pattern-library/miz/components/link-lists/_link-lists.scss
  • Size: 2.1 KB