<div class="brief-info brief-info--link">
    <ul class="list brief-info__items-container">
        <li class="brief-info__list-item list__item">
            <a class="
                        brief-info__link
                        link button button--icon button--icon-light
                    " href="#">
                <span class="
                            brief-info__icon-wrapper
                            
                        ">
                    <svg class="icon brief-info__icon" role="presentation" focusable="false">
                        <title>Free shipping icon</title>
                        <use href="/images/icons-sprite.svg#delivery-truck"></use>
                    </svg>

                </span>

                <span class="brief-info__title ">
                    Free Shipping
                </span>
                <span class="brief-info__subtitle
                                
                            ">
                    On Hundreds of Products
                </span>
            </a>
        </li>
    </ul>
</div>
<div class="brief-info {{ class }}">
    <ul class="list brief-info__items-container">
        {{#each items as |item|}}
            <li class="brief-info__list-item list__item">
                <a
                    class="
                        brief-info__link
                        {{ item.linkClass }}
                    "
                    {{{ item.linkAttributes }}}
                >
                    <span
                        class="
                            brief-info__icon-wrapper
                            {{ item.iconWrapperClass }}
                        "
                    >
                        {{ render '@icon' item.icon }}
                    </span>

                    <{{ item.title.tag }}
                        class="brief-info__title {{ item.title.class }}"
                        {{{ item.title.attributes }}}
                    >
                        {{ item.title.text }}
                    </{{ item.title.tag }}>
                    {{#if item.subtitle.tag }}
                        <{{ item.subtitle.tag }}
                            class="brief-info__subtitle
                                {{ item.subtitle.class }}
                            "
                            {{{ item.subtitle.attributes }}}
                        >
                            {{ item.subtitle.text }}
                        </{{ item.subtitle.tag }}>
                    {{/if}}
                </a>
            </li>
        {{/each}}
    </ul>
</div>
{
  "items": [
    {
      "isButton": false,
      "linkClass": "link button button--icon button--icon-light",
      "linkAttributes": "href=\"#\"",
      "iconLabel": "Delivery",
      "iconWrapperClass": "",
      "icon": {
        "class": "brief-info__icon",
        "id": "delivery-truck",
        "title": "Free shipping icon",
        "hidden": true
      },
      "title": {
        "class": "",
        "tag": "span",
        "text": "Free Shipping"
      },
      "subtitle": {
        "class": "",
        "tag": "span",
        "text": "On Hundreds of Products"
      }
    }
  ],
  "class": "brief-info--link"
}
  • Content:
    $brief-info__mq-display                  : $screen-l !default;
    $brief-info__padding                     : 0 !default;
    $brief-info__border                      : $spacer--extra-small solid $gray-light !default;
    $brief-info__justyfi-content             : space-between !default;
    
    $brief-info__icon-size                   : 48px !default;
    $brief-info__icon-fill                   : $color-primary !default;
    $brief-info__item-padding                : $spacer !default;
    
    $brief-info__title-text-transform        : uppercase !default;
    $brief-info__title-font-family           : $font-family-base !default;
    $brief-info__title-font-size             : $font-size-medium !default;
    $brief-info__title-font-weight           : $font-weight-bold !default;
    $brief-info__title-margin                : 0 !default;
    $brief-info__title-color                 : $gray-darker !default;
    $brief-info__title-text-align            : left !default;
    
    $brief-info__subtitle-font-size          : $font-size-base !default;
    $brief-info__subtitle-font-wight         : $font-weight-base !default;
    $brief-info__subtitle-text-transform     : none !default;
    $brief-info__subtitle-color              : $color-secondary !default;
    $brief-info__subtitle-margin             : 0 !default;
    
    $vreif-info__content-text-decoration     : none !default;
    
    // dividers
    $brief-info__divider-width               : $border-width-base !default;
    $brief-info__divider-top                 : $spacer !default;
    $brief-info__divider-bottom              : $spacer !default;
    $brief-info__divider-left                : auto !default;
    $brief-info__divider-right               : 0 !default;
    $brief-info__divider-color               : $border-color-base !default;
    
    $brief-info__mq-display--dividers        : $screen-m !default;
    
    $brief-info__padding--dividers           : $spacer--semi-large 0 !default;
    $brief-info__border--dividers            : $spacer--extra-small solid $gray-light !default;
    $brief-info__border-width--dividers      : 0 0 $spacer--extra-small 0 !default;
    
    $brief-info__item-padding--dividers      : 0 $spacer--semi-medium !default;
    $brief-info__item-padding--dividers\@xl  : $spacer $spacer--large !default;
    $brief-info__item-margin--dividers       : 0 !default;
    $brief-info__item-margin--dividers\@xl   : 0 !default;
    
    $brief-info__icon-size--dividers         : 64px !default;
    $brief-info__icon-margin--dividers       : 0 0 $spacer !default;
    $brief-info__icon-margin--dividers\@large: 0 $spacer--medium 0 0 !default;
    
    $brief-info__title-font-weight--dividers : $font-weight-bold !default;
    $brief-info__title-font-size--dividers   : $brief-info__title-font-size !default;
    $brief-info__title-height--dividers      : 32px !default;
    
    //link
    $brief-info__link-padding                : 0 0 0 ($brief-info__icon-size + $spacer--medium) !default;
    
    $brief-info__title-color--link           : $gray-darker !default;
    $brief-info__title-font-size--link       : $font-size-medium !default;
    $brief-info__title-font-weight--link     : $font-weight-bold !default;
    $brief-info__title-line-heigh--link      : 24px !default;
    $brief-info__title-margin--link          : 0 !default;
    $brief-info__title-padding--link         : 0 !default;
    
    $brief-info__subtitle-font-size--link    : $font-size-small !default;
    $brief-info__subtitle-font-weight--link  : $font-weight-normal !default;
    $brief-info__subtitle-line-height--link  : 16px !default;
    $brief-info__subtitle-margin--link       : 0 !default;
    $brief-info__subtitle-padding--link      : 0 !default;
    
  • URL: /components/raw/brief-info/_brief-info-variables.scss
  • Filesystem Path: build/components/Organisms/brief-info/_brief-info-variables.scss
  • Size: 3.5 KB
  • Content:
    @import 'brief-info-variables';
    
    .brief-info {
        display: none;
    
        @include mq($brief-info__mq-display) {
            display: block;
            padding: $brief-info__padding;
        }
    
        &--dividers {
            @include mq($brief-info__mq-display--dividers) {
                display: block;
                padding: $brief-info__padding--dividers;
                border: $brief-info__border--dividers;
                border-width: $brief-info__border-width--dividers;
            }
    
            .brief-info__item {
                padding: $brief-info__item-padding--dividers;
                margin: $brief-info__item-margin--dividers;
                flex: 1 1 100%;
    
                @include mq($screen-xl) {
                    padding: $spacer $spacer--large;
                    margin-right: $spacer--large;
                }
    
                &:not(:last-child) {
                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        width: $brief-info__divider-width;
                        top: $brief-info__divider-top;
                        bottom: $brief-info__divider-bottom;
                        left: $brief-info__divider-left;
                        right: $brief-info__divider-right;
                        background-color: $brief-info__divider-color;
                    }
                }
            }
    
            .brief-info__items-container {
                @include mq($brief-info__mq-display--dividers) {
                    flex-flow: row nowrap;
                }
            }
    
            .brief-info__item {
                @include mq($brief-info__mq-display--dividers) {
                    flex-flow: column wrap;
                    align-items: flex-start;
                }
    
                @include mq($screen-l) {
                    flex-flow: row nowrap;
                }
            }
    
            .brief-info__icon-wrapper {
                width: $brief-info__icon-size--dividers;
                height: $brief-info__icon-size--dividers;
                margin: $brief-info__icon-margin--dividers;
    
                @include mq($screen-l) {
                    margin: $brief-info__icon-margin--dividers\@large;
                }
            }
    
            .brief-info__title {
                font-weight: $brief-info__title-font-weight--dividers;
                font-size: $brief-info__title-font-size--dividers;
    
                @include font-padding(
                    $brief-info__title-font-size--dividers,
                    $brief-info__title-height--dividers
                );
            }
        }
    
        &--link {
            .brief-info__icon-wrapper {
                position: absolute;
                left: 0;
            }
    
            .brief-info__title {
                display: block;
                color: $brief-info__title-color--link;
                font-size: $brief-info__title-font-size--link;
                font-weight: $brief-info__title-font-weight--link;
                line-height: $brief-info__title-line-heigh--link;
                margin: $brief-info__title-margin--link;
                padding: $brief-info__title-padding--link;
            }
    
            .brief-info__subtitle {
                display: block;
                font-size: $brief-info__subtitle-font-size--link;
                font-weight: $brief-info__subtitle-font-weight--link;
                line-height: $brief-info__subtitle-line-height--link;
                margin: $brief-info__subtitle-margin--link;
                padding: $brief-info__subtitle-padding--link;
            }
        }
    
        &__items-container {
            display: flex;
            justify-content: $brief-info__justyfi-content;
            flex-flow: column nowrap;
    
            @include mq($brief-info__mq-display) {
                flex-flow: row nowrap;
            }
        }
    
        &__list-item {
            flex-grow: 1;
    
            &:last-child {
                padding-bottom: 0;
            }
        }
    
        &__item {
            display: flex;
            position: relative;
            justify-content: flex-start;
            align-items: center;
            flex-grow: 1;
            padding: $brief-info__item-padding;
    
            &[type="button"] {
                background-color: $white;
                border: 0;
                text-align: left;
                cursor: pointer;
            }
    
            @include mq($brief-info__mq-display) {
                flex-flow: row nowrap;
            }
        }
    
        &__icon-wrapper {
            width: $brief-info__icon-size;
            height: $brief-info__icon-size;
    
            .icon {
                width: 100%;
                height: 100%;
                fill: $brief-info__icon-fill;
            }
        }
    
        &__title {
            margin: $brief-info__title-margin;
            color: $brief-info__title-color;
            font-family: $brief-info__title-font-family;
            font-size: $brief-info__title-font-size;
            font-weight: $brief-info__title-font-weight;
            text-transform: $brief-info__title-text-transform;
            text-align: $brief-info__title-text-align;
        }
    
        &__subtitle {
            margin: $brief-info__subtitle-margin;
            font-size: $brief-info__subtitle-font-size;
            font-weight: $brief-info__subtitle-font-wight ;
            text-transform: $brief-info__subtitle-text-transform;
            color: $brief-info__subtitle-color;
        }
    
        &__content {
            text-decoration: $vreif-info__content-text-decoration;
        }
    
        &__link {
            display: flex;
            flex-direction: column;
            position: relative;
            justify-content: center;
            align-items: flex-start;
            padding: $brief-info__link-padding;
    
            &:before {
                max-width: $brief-info__icon-size;
            }
    
            &:hover,
            &.focus-visible {
                text-decoration: none;
                color: inherit;
            }
        }
    }
    
  • URL: /components/raw/brief-info/_brief-info.scss
  • Filesystem Path: build/components/Organisms/brief-info/_brief-info.scss
  • Size: 5.5 KB

No notes defined.