<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

No notes defined.