<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"
}
}
}
$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;
@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
);
}
}
}
No notes defined.