<ul class="
        list
        list__columns
        
    ">
    <li class="
                list__item
                list__column
                list__column--hidden
            ">
        <a href="" class="
                    link
                    
                ">
            Column 1
        </a>
        <ul class="list">
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
        </ul>
    </li>
    <li class="
                list__item
                list__column
                list__column--hidden
            ">
        <a href="" class="
                    link
                    
                ">
            Column 2
        </a>
        <ul class="list">
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
        </ul>
    </li>
    <li class="
                list__item
                list__column
                list__column--hidden
            ">
        <a href="" class="
                    link
                    
                ">
            Column 3
        </a>
        <ul class="list">
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
        </ul>
    </li>
    <li class="
                list__item
                list__column
                list__column--hidden
            ">
        <a href="" class="
                    link
                    
                ">
            Column 4
        </a>
        <ul class="list">
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
            <li class="
                            list__item
                            list__column-item
                            
                        ">
                <a href="#" class="
                                link
                                
                            ">
                    Lorem ipsum
                </a>
            </li>
        </ul>
    </li>
</ul>
<{{{ listTag }}}
    class="
        list
        list__columns
        {{ class }}
    "
    {{{ attributes }}}
>
    {{#each columns }}
        <{{{ ../elementTag }}}
            class="
                list__item
                list__column
                {{ this.class }}
            "
        >
            <a
                href="{{ link }}"
                class="
                    link
                    {{ linkClass }}
                "
                {{{ linkAttributes }}}
            >
                {{ text }}
            </a>
            <{{{ ../listTag }}}
                class="list"
                {{{ attributes }}}
            >
                {{#each elements }}
                    <{{{ ../../elementTag }}}
                        class="
                            list__item
                            list__column-item
                            {{ this.class }}
                        "
                    >
                        <a
                            href="{{ link }}"
                            class="
                                link
                                {{ linkClass }}
                            "
                            {{{ linkAttributes }}}
                        >
                            {{ text }}
                        </a>
                    </{{{ ../../elementTag }}}>
                {{/each }}
            </{{{ ../listTag }}}>
        </{{{ ../elementTag }}}>
    {{/each }}
</{{{ listTag }}}>
{
  "listTag": "ul",
  "elementTag": "li",
  "elements": [
    {
      "text": "Lorem ipsum"
    },
    {
      "text": "Lorem ipsum"
    },
    {
      "text": "Lorem ipsum"
    },
    {
      "text": "Lorem ipsum"
    },
    {
      "text": "Lorem ipsum"
    }
  ],
  "columns": [
    {
      "text": "Column 1",
      "class": "list__column--hidden",
      "elements": [
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        },
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        },
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        }
      ]
    },
    {
      "text": "Column 2",
      "class": "list__column--hidden",
      "elements": [
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        },
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        }
      ]
    },
    {
      "text": "Column 3",
      "class": "list__column--hidden",
      "elements": [
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        },
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        },
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        },
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        }
      ]
    },
    {
      "text": "Column 4",
      "class": "list__column--hidden",
      "elements": [
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        },
        {
          "linkClass": "",
          "text": "Lorem ipsum",
          "link": "#"
        }
      ]
    }
  ]
}
  • Content:
    $list__margin                                          : 0 !default;
    $list__padding                                         : 0 !default;
    $list__color                                           : $font-color-base !default;
    $list__font-size                                       : $font-size-base !default;
    $list__list-style                                      : none !default;
    $list__item-padding                                    : 0 0 $spacer--medium !default;
    $list__item-last-child-padding                         : inherit inherit 0 !default;
    $list__label-padding                                   : 0 $spacer $spacer 0 !default;
    $list__label-after-content                             : ': ' !default;
    $list__value-padding                                   : 0 $spacer $spacer 0 !default;
    $list__content-padding-left                            : $spacer !default;
    
    // Horizontal variant
    $list__item-padding--horizontal                        : $spacer !default;
    
    // With Icon variant
    $list__item-padding--with-icon                         : 0 !default;
    $list__icon-link-padding--with-icon                    : $spacer--medium !default;
    
    // With Image variant
    $list__image-width--with-image                         : $spacer--medium !default;
    $list__image-height--with-image                        : auto !default;
    
    // Divided variant
    $list__item-border-bottom--divider                     : 1px solid $gray-dark !default;
    $list__item-padding--divider                           : $spacer 0 !default;
    $list__item-last-child-border-bottom--divider          : none !default;
    $list__item-border-bottom--divider-horizontal          : none !default;
    $list__item-border-right--divider-horizontal           : $border-base !default;
    $list__item-last-child-border-right--divider-horizontal: none !default;
    $list__item-padding--divider-horizontal                : $spacer !default;
    
    // Native variant
    $list__item-width--native                              : $spacer--extra-small !default;
    $list__item-height--native                             : $spacer--extra-small !default;
    $list__item-padding--native                            : 0 0 $spacer calc(#{$spacer--medium - $list__item-height--native}) !default;
    $list__item-background-color--native                   : $color-secondary !default;
    $list__item-before-top--native                         : 30% !default;
    $list__item-before-left--native                        : 0 !default;
    
    // Columns variant
    $list__column-padding                                  : 0 $spacer--small 0 0 !default;
    $list__column-last-child-padding                       : 0 !default;
    $list__column-item-last-child-padding-bottom           : $spacer !default;
    $list__column-item-fist-child-padding-top              : $spacer !default;
    
    // Table
    $list__margin--table                                   : 0 0 $spacer !default;
    $list__label-font-size--table                          : $font-size-medium !default;
    $list__label-font-weight--table                        : $font-weight-bold !default;
    $list__value-font-size--table                          : $font-size-medium !default;
    $list__item-line-height--table                         : 32px !default;
    
    %bullet:before {
        content: "";
        position: absolute;
        top: $list__item-before-top--native;
        left: $list__item-before-left--native;
        width: $list__item-width--native;
        height: $list__item-height--native;
        background-color: $list__item-background-color--native;
    }
    
  • URL: /components/raw/list/_list-variables.scss
  • Filesystem Path: build/components/Molecules/list/_list-variables.scss
  • Size: 3.5 KB
  • Content:
    @import 'list-variables';
    
    .list {
        margin: $list__margin;
        padding: $list__padding;
        list-style: $list__list-style;
        color: $list__color;
        font-size: $list__font-size;
    
        &--center {
            justify-content: center;
            text-align: center;
        }
    
        &--horizontal {
            display: flex;
            flex-flow: row wrap;
    
            @include mq($screen-m) {
                flex-flow: row nowrap;
            }
    
            .list__item {
                padding: $list__item-padding--horizontal;
    
                &:first-child,
                &:last-child {
                    padding: $list__item-padding--horizontal;
                }
            }
        }
    
        &--with-icon {
            justify-content: center;
    
            .list__item {
                display: flex;
                align-items: center;
                padding: $list__item-padding--with-icon;
    
                &:first-child,
                &:last-child {
                    padding: $list__item-padding--with-icon;
                }
            }
    
            .list__icon-link {
                padding: $list__icon-link-padding--with-icon;
            }
        }
    
        &--with-image {
            .list__item {
                display: flex;
            }
            .list__image {
                width: $list__image-width--with-image;
                height: $list__image-height--with-image;
            }
        }
    
        &--divided {
            .list__item {
                border-bottom: $list__item-border-bottom--divider;
                padding: $list__item-padding--divider;
    
                &:last-child {
                    border-bottom: $list__item-last-child-border-bottom--divider;
                }
            }
    
            &.list--horizontal {
                .list__item {
                    border-bottom: $list__item-border-bottom--divider-horizontal;
                    border-right: $list__item-border-right--divider-horizontal;
                    padding: $list__item-padding--divider-horizontal;
    
                    &:last-child {
                        border-right: $list__item-last-child-border-right--divider-horizontal;
                    }
                }
            }
        }
    
        &--description {
            display: inline-block;
        }
    
        &--native {
            .list__item {
                @extend %bullet;
                position: relative;
                padding: $list__item-padding--native;
            }
        }
    
        &--table {
            display: table;
            margin: $list__margin--table;
    
            .list__item {
                display: table-row;
            }
    
            .list__label {
                display: table-cell;
                float: none;
                font-size: $list__label-font-size--table;
                font-weight: $list__label-font-weight--table;
                line-height: $list__item-line-height--table;
            }
    
            .list__value {
                display: table-cell;
                float: none;
                font-size: $list__value-font-size--table;
                line-height: $list__item-line-height--table;
            }
        }
    
        &--font-medium {
            font-size: $font-size-medium;
        }
    
        &__item {
            display: list-item;
            padding: $list__item-padding;
    
            &:last-child {
                padding: $list__item-last-child-padding;
            }
        }
    
        &__label {
            clear: left;
            float: left;
            padding: $list__label-padding;
    
            &:after {
                content: $list__label-after-content;
            }
        }
    
        &__value {
            float: left;
            padding: $list__value-padding;
        }
    
        &__content {
            padding-left: $list__content-padding-left;
        }
    
        &__columns {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
    
            @include mq($screen-m) {
                flex-direction: row;
            }
        }
    
        &__column {
            padding: $list__column-padding;
    
            &:last-child {
                padding: $list__column-last-child-padding;
            }
    
            &--hidden {
                & > .link {
                    display: none;
                }
            }
        }
    
        &__column-item {
            &:first-child {
                padding-top: $list__column-item-fist-child-padding-top;
            }
    
            &:last-child {
                padding-bottom: $list__column-item-last-child-padding-bottom;
            }
        }
    }
    
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: build/components/Molecules/list/_list.scss
  • Size: 4.1 KB

Improve a11y on the lists

If the list is preceded by the title (in heading or some other element), it’s recommended to add an aria-labelledby attribute on the list and bind there the list title:

<h2 id="list-title">List title</h2>
<ul class="list" aria-labelledby="list-title">
    <li class="list__item">
        Lorem ipsum
    </li>
    <li class="list__item">
        Lorem ipsum
    </li>
    <li class="list__item">
        Lorem ipsum
    </li>
    <li class="list__item">
        Lorem ipsum
    </li>
    <li class="list__item">
        Lorem ipsum
    </li>
</ul>