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.
{#

  Link list
  List of links, used for non-navigational link grouping.
  @see https://designsystem.missouri.edu/components/detail/miz-link-lists.html

  @uses     LinkListItem, LinkListLink
  @uses     AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param    {object}    options
  @param    {string}    ├─ options.class
  @param    {object}    ├─ options.attributes
  @param    {string}    ├─ options.element      ("ul"|"div")
  @param    {bool}      ├─ options.layout       Applies inline layout
  @param    {string}    ├─ options.align        Applies right alignment
  @param    {bool}      ├─ options.fill         Makes list fill space
  @param    {array}     ├─ options.list         Array of list items. Use with 'ul' element.
  @param    {array}     └─ options.links        Array of links. Use with 'div' element.

#}
{% macro LinkList( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}
    {% from "@miz/components/link-lists/link-lists.twig" import LinkListItem as linkListItem %}
    {% from "@miz/components/link-lists/link-lists.twig" import LinkListLink as linkListLink %}

    {# Parameters #}
    {% set linkListClass       = "miz-link-list" %}
    {% set linkListClass       = options.class ? utils.AppendClasses( linkListClass, options.class ) : linkListClass %}
    {% set linkListAttributes  = options.attributes ? utils.AddAttributes( options.attributes ) %}
    {% set linkListElement     = "ul" %}
    {% set linkListElement     = options.element ?: linkListElement %}
    {% set linkListLayout      = options.layout ?: false %}
    {% set linkListAlign       = options.align ?: false %}
    {% set linkListFill        = options.fill ?: false %}
    {% set linkListList        = options.list %}
    {% set linkListLinks       = options.links %}

    {# Variables #}
    {% if linkListLayout %}
      {% set linkListClass     = utils.AppendClasses( linkListClass, 'miz-link-list--inline' ) %}
    {% endif %}
    {% if linkListAlign %}
      {% set linkListClass     = utils.AppendClasses( linkListClass, 'miz-link-list--right' ) %}
    {% endif %}
    {% if linkListFill %}
      {% set linkListClass     = utils.AppendClasses( linkListClass, 'miz-link-list--fill' ) %}
    {% endif %}


  {% endspaceless -%}

  <{{ linkListElement }} class="{{ linkListClass }}"{{ linkListAttributes }}>
    {% for item in linkListList if linkListList|length != 0 -%}
      {{ linkListItem( item ) }}
    {% endfor -%}
    {%- for link in linkListLinks if linkListLinks|length != 0 -%}
      {{ linkListLink( link.link ) }}
    {% endfor -%}
  </{{ linkListElement }}>

{%- endmacro %}

{#

  Link list -> Item
  Link Item used with Link List using <ul>

  @usedby   LinkList
  @uses     LinkListLink
  @uses     AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param    {object}    options
  @param    {string}    ├─ options.class
  @param    {object}    ├─ options.attributes
  @param    {object}    └─ options.link

#}
{% macro LinkListItem( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}
    {% from "@miz/components/link-lists/link-lists.twig" import LinkListLink as linkListLink %}

    {# Parameters #}
    {% set linkListItemClass       = "miz-link-list__item" %}
    {% set linkListItemClass       = options.class ? utils.AppendClasses( linkListItemClass, options.class ) : linkListItemClass %}
    {% set linkListItemAttributes  = options.attributes ? utils.AddAttributes( options.attributes ) %}
    {% set linkListItemLink        = options.link ?: false %}

  {% endspaceless -%}

  <li class="{{ linkListItemClass }}"{{ linkListItemAttributes }}>{{- linkListLink( linkListItemLink) -}}</li>

{%- endmacro %}

{#

  Link list -> Link
  Link element used within Link lists

  @usedby   LinkList, LinkListItem
  @uses     AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param    {object}    options
  @param    {string}    ├─ options.class
  @param    {object}    ├─ options.attributes
  @param    {string}    ├─ options.href
  @param    {string}    └─ options.text
 #}
{% macro LinkListLink( options ) %}
  {%- spaceless %}

    {# Imports #}
    {% import "@miz/utilities/utils.twig" as utils %}

    {# Parameters #}
    {% set linkListLinkClass       = "miz-link-list__link" %}
    {% set linkListLinkClass       = options.class ? utils.AppendClasses( linkListLinkClass, options.class ) : linkListLinkClass %}
    {% set linkListLinkAttributes  = options.attributes ? utils.AddAttributes( options.attributes ) %}
    {% set linkListLinkHref        = options.href ?: "#" %}
    {% set linkListLinkText        = options.text ?: "No text" %}

  {#- Output -#}
  <a href="{{ linkListLinkHref }}" class="{{ linkListLinkClass }}"{{ linkListLinkAttributes }}>{{ linkListLinkText }}</a>

  {% endspaceless -%}
{% endmacro %}

        
    
/* 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