<ul class="list ">
    <li class="list__item ">
        <a href="#" class="
                    link
                    
                ">
            <button class="button " type="button" aria-label="button">
                I am a button
            </button>

        </a>
    </li>
    <li class="list__item ">
        <a href="#link" class="
                    link
                    
                ">
            <button class="button " type="button" aria-label="button">
                I am a button
            </button>

        </a>
    </li>
    <li class="list__item ">
        <a href="#lorem" class="
                    link
                    
                ">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/home/brand-example_112-112.png" alt="brand name alt text">
            </div>

        </a>
    </li>
    <li class="list__item ">
        <a href="#" class="
                    link
                    
                ">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
            </div>

        </a>
    </li>
    <li class="list__item ">
        <a href="#" class="
                    link
                    
                ">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
            </div>

        </a>
    </li>
</ul>
<{{{ listTag }}} class="list {{ class }}" {{{ attributes }}}>
    {{# each elements }}
        <{{{ ../elementTag }}} class="list__item {{ this.class }}">
            <a
                href="{{ link }}"
                class="
                    link
                    {{ linkClass }}
                "
                {{{ linkAttributes }}}
            >
                {{ render (component content) contentContext }}
                {{ text }}
            </a>
        </{{{ ../elementTag }}}>
    {{/ each }}
</{{{ listTag }}}>
{
  "listTag": "ul",
  "elementTag": "li",
  "elements": [
    {
      "linkClass": "",
      "text": "",
      "content": "button",
      "link": "#"
    },
    {
      "linkClass": "",
      "text": "",
      "content": "button",
      "link": "#link"
    },
    {
      "linkClass": "",
      "text": "",
      "content": "image",
      "contentContext": {
        "src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
        "dataSrc": "/images/home/brand-example_112-112.png",
        "alt": "brand name alt text"
      },
      "link": "#lorem"
    },
    {
      "linkClass": "",
      "text": "",
      "content": "image",
      "link": "#"
    },
    {
      "linkClass": "",
      "text": "",
      "content": "image",
      "link": "#"
    }
  ],
  "class": ""
}
  • 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;
            }
        }
    
        &__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 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>