Alpaca components for Magento 2

List: Table 

<ul class="list list--table" title="Alpaca table list">
    <li class="list__item ">
        <span class="list__label">
            Lorem ipsum long label
        </span>
        <span class="list__value">
            Lorem ipsum Value
        </span>
    </li>
    <li class="list__item ">
        <span class="list__label">
            Lorem ipsum
        </span>
        <span class="list__value">
            Lorem ipsum some long value
        </span>
    </li>
</ul>
 
<{{{ listTag }}} class="list {{ class }}" {{{ attributes }}}>
    {{# each elements }}
        <{{{ ../elementTag }}} class="list__item {{ this.class }}">
            <span class="list__label">
                {{ label }}
            </span>
            <span class="list__value">
                {{ value }}
            </span>
        </{{{ ../elementTag }}}>
    {{/ each }}
</{{{ listTag }}}>
 
{
  "listTag": "ul",
  "elementTag": "li",
  "elements": [
    {
      "label": "Lorem ipsum long label",
      "value": "Lorem ipsum Value"
    },
    {
      "label": "Lorem ipsum",
      "value": "Lorem ipsum some long value"
    }
  ],
  "class": "list--table",
  "attributes": "title=\"Alpaca table list\""
}
  • 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>