<div class="brief-info brief-info--dividers">
    <ul class="list brief-info__items-container">
        <li class="brief-info__item">
            <span class="
                            brief-info__icon-wrapper
                            
                        " aria-label="Return policy">
                <svg class="icon brief-info__icon" role="presentation" focusable="false">
                    <title>Return Policy</title>
                    <use xlink:href="/images/icons-sprite.svg#check"></use>
                </svg>

            </span>
            <div class="brief-info__content">
                <h3 class="brief-info__title ">
                    Lorem Ipsum is simply
                </h3>
            </div>
        </li>
        <li class="brief-info__item">
            <span class="
                            brief-info__icon-wrapper
                            
                        " aria-label="Lorem Ipsum is simply">
                <svg class="icon brief-info__icon" role="presentation" focusable="false">
                    <title>Big star</title>
                    <use xlink:href="/images/icons-sprite.svg#check"></use>
                </svg>

            </span>
            <div class="brief-info__content">
                <h3 class="brief-info__title ">
                    Lorem Ipsum is simply
                </h3>
            </div>
        </li>
        <li class="brief-info__item">
            <span class="
                            brief-info__icon-wrapper
                            
                        " aria-label="Our Customers Are Talking">
                <svg class="icon brief-info__icon" role="presentation" focusable="false">
                    <title>Our Customers Are Talking</title>
                    <use xlink:href="/images/icons-sprite.svg#check"></use>
                </svg>

            </span>
            <div class="brief-info__content">
                <h3 class="brief-info__title ">
                    Our Customers Are Talking
                </h3>
            </div>
        </li>
    </ul>
</div>
<div class="brief-info {{ class }}">
    <ul class="list brief-info__items-container">
        {{#each items as |item|}}
            {{#if item.isButton}}
                <li class="brief-info__list-item list__item">
                    <button
                        class="brief-info__item {{ item.buttonClass }}"
                        type="button"
                        {{{ item.buttonAttributes }}}
                    >
            {{else}}
                <li class="brief-info__item">
            {{/if}}
                    <span
                        class="
                            brief-info__icon-wrapper
                            {{ item.iconWrapperClass }}
                        "
                        aria-label="{{ item.iconLabel }}"
                    >
                        {{ render '@icon' item.icon }}
                    </span>
                    <div class="brief-info__content">
                        <{{ 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}}
                    </div>
            {{#if item.isButton}}
                    </button>
                </li>
            {{else}}
                </li>
            {{/if}}
        {{/each}}
    </ul>
</div>
{
  "items": [
    {
      "iconLabel": "Return policy",
      "iconWrapperClass": "",
      "icon": {
        "class": "brief-info__icon",
        "id": "check",
        "title": "Return Policy",
        "hidden": true
      },
      "title": {
        "class": "",
        "tag": "h3",
        "text": "Lorem Ipsum is simply"
      },
      "subtitle": {
        "class": "",
        "tag": "",
        "text": ""
      }
    },
    {
      "iconLabel": "Lorem Ipsum is simply",
      "iconWrapperClass": "",
      "icon": {
        "class": "brief-info__icon",
        "id": "check",
        "title": "Big star",
        "hidden": true
      },
      "title": {
        "class": "",
        "tag": "h3",
        "text": "Lorem Ipsum is simply"
      },
      "subtitle": {
        "class": "",
        "tag": "",
        "text": ""
      }
    },
    {
      "iconLabel": "Our Customers Are Talking",
      "iconWrapperClass": "",
      "icon": {
        "class": "brief-info__icon",
        "id": "check",
        "title": "Our Customers Are Talking",
        "hidden": true
      },
      "title": {
        "class": "",
        "tag": "h3",
        "text": "Our Customers Are Talking"
      },
      "subtitle": {
        "class": "",
        "tag": "",
        "text": ""
      }
    }
  ],
  "class": "brief-info--dividers"
}
  • 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                   : $white !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                 : $white !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__item--width                 : calc(33.333333% - #{$spacer}) !default;
    $brief-info__mq-display--dividers        : $screen-m !default;
    
    $brief-info__padding--dividers           : $spacer--m 0 !default;
    $brief-info__border--dividers            : 0 !default;
    $brief-info__border-width--dividers      : $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         : 24px !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) {
                    background: $dkk-second;
                    padding: $spacer--small $spacer--semi-medium;
                    margin: 0;
                    align-items: center;
                    justify-content: center;
                }
    
                &: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: center;
                    max-width: $brief-info__item--width;
                    border-radius: 5px;
                }
    
                @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.7 KB

There are no notes for this item.