Kistenkoning components for Magento 2

Article Item 

<article class="
        article-item
        
    ">
    <header class="article-item__header ">
        <h2 class="article-item__title heading--font-secondary">
            Lorem Ipsum is simply dummy text of the printing
        </h2>

        <span class="article-item__sub-title heading--font-secondary">
            August 8, 2019
        </span>

    </header>
    <section class="article-item__container row">
        <div class="article-item__media col-lg-4">
            <a href="" class="banner article-item__banner">
                <picture class="image article-item__image">
                    <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_402.png" media="(max-width: 768px)" />
                    <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="" />

                    <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-320_176.jpg" alt="article banner image" />
                </picture>

            </a>

        </div>
        <div class="article-item__body col-lg-8">
            <div class="article-item__content">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <footer class="article-item__footer ">
                <a class="link article-item__footer-link" href="#" title="Read more">
                    Read more
                </a>

            </footer>
        </div>
    </section>

</article>
 
<{{{ tag }}}
    class="
        article-item
        {{ class }}
    "
>
    <header class="article-item__header {{ headerClass }}">
        {{ render '@heading' articleTitle }}

        {{#if articleSubtitle }}
            {{ render '@heading' articleSubtitle }}
        {{/if}}
    </header>
    <section class="article-item__container {{ containerClass }}">
        <div class="article-item__media {{ mediaClass }}">
            {{ render '@banner' articleBanner }}
        </div>
        <div class="article-item__body {{ bodyClass }}">
            <div class="article-item__content">
                {{{ articleContent }}}
            </div>
            {{#if footer }}
                <footer class="article-item__footer {{ footerClass }}">
                    {{ render (component footer.component) footer.context merge=true }}
                </footer>
            {{/if}}
        </div>
    </section>

</{{{ tag }}}>
 
{
  "tag": "article",
  "class": "",
  "headerClass": "",
  "containerClass": "row",
  "mediaClass": "col-lg-4",
  "bodyClass": "col-lg-8",
  "footerClass": "",
  "articleTitle": {
    "tag": "h2",
    "class": "article-item__title heading--font-secondary",
    "text": "Lorem Ipsum is simply dummy text of the printing"
  },
  "articleSubtitle": {
    "tag": "span",
    "class": "article-item__sub-title heading--font-secondary",
    "text": "August 8, 2019"
  },
  "articleBanner": {
    "class": "article-item__banner",
    "image": {
      "class": "article-item__image",
      "defaultSrc": "/images/banner/banner-320_176.jpg",
      "sources": [
        {
          "src": "/images/banner/banner-768_402.png",
          "mediaQuery": "(max-width: 768px)"
        },
        {
          "src": "/images/banner/banner-320_176.jpg",
          "mediaQuery": ""
        }
      ],
      "alt": "article banner image"
    }
  },
  "articleContent": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>",
  "footer": {
    "component": "link",
    "context": {
      "class": "article-item__footer-link",
      "title": "Read more",
      "text": "Read more"
    }
  }
}
  • Content: 
    $article-item__margin                           : 0 0 $spacer--semi-medium !default;

//--single
$article-item__margin--single                   : 0 0 72px !default;
$article-item__margin--single\@large            : 0 !default;

//header
$article-item__header-margin                    : 0 0 $spacer--medium !default;

//header--single
$article-item__header-margin--single\@large     : 0 $spacer--medium $spacer--medium 0 !default;

//title
$article-item__title-font-size                  : $font-size-large !default;
$article-item__title-font-weight                : $font-weight-bold !default;
$article-item__title-margin                     : 0 0 $spacer !default;
$article-item__title-text-transform             : none !default;
$article-item__title-text-height                : 48px !default;

//title--single
$article-item__title-font-size--single          : $font-size-extra-large !default;
$article-item__title-font-size--single\@medium  : $font-size-super-extra-large !default;
$article-item__title-font-weight--single        : $font-weight-normal !default;
$article-item__title-margin--single             : 0 0 $spacer !default;
$article-item__title-text-transform--single     : uppercase !default;
$article-item__title-text-height--single        : 48px !default;
$article-item__title-text-height--single\@medium: 48px !default;
$article-item__title-letter-spacing\@medium     : 1px !default;

//subtitle
$article-item__subtitle-font-size               : $font-size-small !default;
$article-item__subtitle-line-height             : 16px !default;
$article-item__subtitle-font-weight             : $font-weight-normal !default;
$article-item__subtitle-margin                  : 0 !default;
$article-item__subtitle-text-transform          : none !default;

//media
$article-item__media-margin                     : 0 0 $spacer--semi-medium !default;
$article-item__media-margin\@large              : 0 !default;

//media--single
$article-item__media-margin--single             : 0 0 $spacer--extra-large !default;
$article-item__media-margin--single\@large      : 0 !default;

//body
$article-item__body-margin                      : 0 !default;
$article-item__body-justify-content\@large      : space-between !default;

//body--single
$article-item__body-padding\@xlarge             : 54px 96px 0 112px !default;

//content
$article-item__content-margin                   : 0 0 $spacer--medium !default;

//content--single
$article-item__content-margin--single           : 0 0 $spacer--extra-large !default;

//content text
$article-item__content-text-margin              : 0 !default;
$article-item__content-text-font-size           : $font-size-medium !default;
$article-item__content-text-line-height         : 2 !default;

//content text--single
$article-item__content-text-margin--single      : 0 0 $spacer--large !default;

//container--single
$article-item__container-margin--single\@large  : 0 $spacer--medium 0 0 !default;

//footer-link
$article-item__footer-link-font-size            : $font-size-base !default;
$article-item__footer-link-font-weight          : $font-weight-bold !default;
$article-item__footer-link-height               : 48px !default;

//links-list
$article-item__links-list-font-size             : $font-size-medium !default;
$article-item__links-list-height                : 48px !default;
$article-item__links-list-padding-right         : $spacer !default;
  • URL: /components/raw/article-item/_article-item-variables.scss
  • Filesystem Path: build/components/Organisms/article-item/_article-item-variables.scss
  • Size: 3.4 KB
  • Content: 
    @import 'article-item-variables';

.article-item {
    display: flex;
    flex-direction: column;
    margin: $article-item__margin;

    &--single {
        margin: $article-item__margin--single;

        @include mq($screen-l) {
            margin: $article-item__margin--single\@large;
        }

        .article-item__header {
            @include mq($screen-l) {
                margin: $article-item__header-margin--single\@large;
            }
        }

        .article-item__container {
            flex-direction: column;

            @include mq($screen-l) {
                margin: $article-item__container-margin--single\@large;
            }
        }

        .article-item__body {
            @include mq($screen-xl) {
                padding: $article-item__body-padding\@xlarge;
            }
        }

        .article-item__title {
            font-size: $article-item__title-font-size--single;
            font-weight: $article-item__title-font-weight--single;
            margin: $article-item__title-margin--single;
            text-transform: $article-item__title-text-transform--single;

            @include font-padding(
                $article-item__title-font-size--single,
                $article-item__title-text-height--single
            );

            @include mq($screen-m) {
                font-size: $article-item__title-font-size--single\@medium;
                letter-spacing: $article-item__title-letter-spacing\@medium;

                @include font-padding(
                    $article-item__title-font-size--single\@medium,
                    $article-item__title-text-height--single\@medium
                );
            }
        }

        .article-item__media {
            margin: $article-item__media-margin--single;

            @include mq($screen-l) {
                margin: $article-item__media-margin--single\@large;
            }
        }

        .article-item__content {
            margin: $article-item__content-margin--single;
        }

        .article-item__content {
            p {
                margin: $article-item__content-text-margin--single;
            }

            * {
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    &__header {
        margin: $article-item__header-margin;
    }

    &__title {
        font-size: $article-item__title-font-size;
        font-weight: $article-item__title-font-weight;
        margin: $article-item__title-margin;
        text-transform: $article-item__title-text-transform;

        @include font-padding(
            $article-item__title-font-size,
            $article-item__title-text-height
        );
    }

    &__sub-title {
        font-size: $article-item__subtitle-font-size;
        line-height: $article-item__subtitle-line-height;
        font-weight: $article-item__subtitle-font-weight;
        margin: $article-item__subtitle-margin;
        text-transform: $article-item__subtitle-text-transform;
    }

    &__container {
        display: flex;
        flex-flow: column nowrap;

        @include mq($screen-l) {
            flex-direction: row;
        }
    }

    &__media {
        margin: $article-item__media-margin;

        @include mq($screen-l) {
            margin: $article-item__media-margin\@large;
        }
    }

    &__body {
        margin: $article-item__body-margin;

        @include mq($screen-l) {
            display: flex;
            flex-flow: column nowrap;
            justify-content: $article-item__body-justify-content\@large;
        }
    }

    &__content,
    &__content p {
        margin: $article-item__content-text-margin;
        font-size: $article-item__content-text-font-size;
        line-height: $article-item__content-text-line-height;
    }

    &__content {
        margin: $article-item__content-margin;
    }

    &__footer-link {
        display: block;
        font-size: $article-item__footer-link-font-size;
        font-weight: $article-item__footer-link-font-weight;

        @include font-padding(
            $article-item__footer-link-font-size,
            $article-item__footer-link-height
        );
    }

    &__links-list {
        flex-wrap: wrap;

        .list__item,
        .list__item:first-child,
        .list__item:last-child {
            font-size: $article-item__links-list-font-size;

            @include font-padding(
                $article-item__links-list-font-size,
                $article-item__links-list-height,
                $article-item__links-list-padding-right
            );
        }
    }
}
  • URL: /components/raw/article-item/_article-item.scss
  • Filesystem Path: build/components/Organisms/article-item/_article-item.scss
  • Size: 4.6 KB

There are no notes for this item.