Kistenkoning components for Magento 2

Brief Info: Dividers 

<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.