Button List

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="button-list  ">
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 1">
                <span class="button__text">
                    button 1
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 2">
                <span class="button__text">
                    button 2
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 3">
                <span class="button__text">
                    button 3
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 4">
                <span class="button__text">
                    button 4
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 5">
                <span class="button__text">
                    button 5
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 6">
                <span class="button__text">
                    button 6
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
</div>


        <div class="button-list {{ modifier }} {{ class }}">
    {% for button in data.buttons %}
        <div class="button-list__item">
            {% include '@button' with {class: 'button-list__button', modifier: 'button--icon-text', data: button} %}
        </div>
    {% endfor %}
</div>


        {
  "language": "en-US",
  "data": {
    "buttons": [
      {
        "text": "button 1",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 2",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 3",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 4",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 5",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 6",
        "icon": "arrow-right",
        "link": "#"
      }
    ]
  }
}

File:

Content:


                                .button-list {
    column-count: 1; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    column-gap: 50px; /* stylelint-disable-line plugin/no-unsupported-browser-features */

    &.button-list--col-2 {
        column-count: 2; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    &.button-list--col-3 {
        @include bp(sm-min) {
            column-count: 2; /* stylelint-disable-line plugin/no-unsupported-browser-features */
        }

        @include bp(md-min) {
            column-count: 3; /* stylelint-disable-line plugin/no-unsupported-browser-features */
        }
    }
}

.button-list__button {
    .button-list--col-3 & {
        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }
}

.button-list__item {
    padding: 6px 0;
}

URL: /components/raw/button-list/button-list.scss
Filesystem Path: src/patterns/components/button-list/button-list.scss
Size: 873 Bytes

Content:
import './button-list.scss';
URL: /components/raw/button-list/button-list.ts
Filesystem Path: src/patterns/components/button-list/button-list.ts
Size: 29 Bytes

Handle: @button-list--default
Filesystem Path: src/patterns/components/button-list/button-list.twig
References (1): @button
Referenced by (2): @button-module, @footer


        
        
        <div class="button-list button-list--col-2 ">
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 1">
                <span class="button__text">
                    button 1
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 2">
                <span class="button__text">
                    button 2
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 3">
                <span class="button__text">
                    button 3
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 4">
                <span class="button__text">
                    button 4
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 5">
                <span class="button__text">
                    button 5
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 6">
                <span class="button__text">
                    button 6
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
</div>


        <div class="button-list {{ modifier }} {{ class }}">
    {% for button in data.buttons %}
        <div class="button-list__item">
            {% include '@button' with {class: 'button-list__button', modifier: 'button--icon-text', data: button} %}
        </div>
    {% endfor %}
</div>


        {
  "language": "en-US",
  "data": {
    "buttons": [
      {
        "text": "button 1",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 2",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 3",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 4",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 5",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 6",
        "icon": "arrow-right",
        "link": "#"
      }
    ]
  },
  "modifier": "button-list--col-2"
}

File:

Content:


                                .button-list {
    column-count: 1; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    column-gap: 50px; /* stylelint-disable-line plugin/no-unsupported-browser-features */

    &.button-list--col-2 {
        column-count: 2; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    &.button-list--col-3 {
        @include bp(sm-min) {
            column-count: 2; /* stylelint-disable-line plugin/no-unsupported-browser-features */
        }

        @include bp(md-min) {
            column-count: 3; /* stylelint-disable-line plugin/no-unsupported-browser-features */
        }
    }
}

.button-list__button {
    .button-list--col-3 & {
        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }
}

.button-list__item {
    padding: 6px 0;
}

URL: /components/raw/button-list/button-list.scss
Filesystem Path: src/patterns/components/button-list/button-list.scss
Size: 873 Bytes

Content:
import './button-list.scss';
URL: /components/raw/button-list/button-list.ts
Filesystem Path: src/patterns/components/button-list/button-list.ts
Size: 29 Bytes

Handle: @button-list--two-columns
Filesystem Path: src/patterns/components/button-list/button-list.twig
References (1): @button

Three Columns

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="button-list button-list--col-3 ">
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 1">
                <span class="button__text">
                    button 1
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 2">
                <span class="button__text">
                    button 2
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 3">
                <span class="button__text">
                    button 3
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 4">
                <span class="button__text">
                    button 4
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 5">
                <span class="button__text">
                    button 5
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
    <div class="button-list__item">

        <a href="#" class="button button--icon-text button-list__button ">

            <span class="button__inner" data-text="button 6">
                <span class="button__text">
                    button 6
                    <svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                    </svg>

                </span>
            </span>
        </a>
    </div>
</div>


        <div class="button-list {{ modifier }} {{ class }}">
    {% for button in data.buttons %}
        <div class="button-list__item">
            {% include '@button' with {class: 'button-list__button', modifier: 'button--icon-text', data: button} %}
        </div>
    {% endfor %}
</div>


        {
  "language": "en-US",
  "data": {
    "buttons": [
      {
        "text": "button 1",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 2",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 3",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 4",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 5",
        "icon": "arrow-right",
        "link": "#"
      },
      {
        "text": "button 6",
        "icon": "arrow-right",
        "link": "#"
      }
    ]
  },
  "modifier": "button-list--col-3"
}

File:

Content:


                                .button-list {
    column-count: 1; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    column-gap: 50px; /* stylelint-disable-line plugin/no-unsupported-browser-features */

    &.button-list--col-2 {
        column-count: 2; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    &.button-list--col-3 {
        @include bp(sm-min) {
            column-count: 2; /* stylelint-disable-line plugin/no-unsupported-browser-features */
        }

        @include bp(md-min) {
            column-count: 3; /* stylelint-disable-line plugin/no-unsupported-browser-features */
        }
    }
}

.button-list__button {
    .button-list--col-3 & {
        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }
}

.button-list__item {
    padding: 6px 0;
}

URL: /components/raw/button-list/button-list.scss
Filesystem Path: src/patterns/components/button-list/button-list.scss
Size: 873 Bytes

Content:
import './button-list.scss';
URL: /components/raw/button-list/button-list.ts
Filesystem Path: src/patterns/components/button-list/button-list.ts
Size: 29 Bytes

Handle: @button-list--three-columns
Filesystem Path: src/patterns/components/button-list/button-list.twig
References (1): @button

Two Columns

Three Columns

Forms

Notifications

Copy environment

Button List

Two Columns

Three Columns