<article class="article">
<div class="article__image">
<picture>
<source media="(min-width:768px)" srcset="https://via.placeholder.com/660x470">
<img class="w-full object-cover" src="https://via.placeholder.com/660x470" alt="Test alt" />
</picture>
</div>
<div class="context context--small context--align-left context--default">
<div class="context__subheading">Articles leverage context components</div>
<h2 class="context__heading">This is an article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat ultricies consectetur. Duis vel ligula non nisi dignissim commodo vel dignissim nibh.</p>
<div class="button-group">
</div>
</div>
</article>
{% import "macros.twig" as macros %}
{% if in_component_library %}
{% set context = '@context' %}
{% else %}
{% set context = 'context.twig' %}
{% endif %}
<article class="article">
{% if image %}
<div class="article__image">
{% if buttons %}
{% set firstBtn = buttons|first %}
<a href="{{ firstBtn.button.url }}">
{% endif %}
{{ macros.picture(
'w-full object-cover',
image.srcset,
image.src,
image.sizes.Rectangle,
image.sizes.Rectangle_mobile,
image.alt,
in_component_library
) }}
{% if buttons %}</a>{% endif %}
</div>
{% endif %}
{% include context with {
size: 'small',
heading: heading,
subheading: subheading,
paragraphs: paragraphs,
buttons: {
color: background == 'red' ? 'black' : 'red',
items: buttons,
},
} %}
</article>
{
"in_component_library": true,
"image": {
"srcset": "https://via.placeholder.com/660x470",
"src": "https://via.placeholder.com/660x470",
"alt": "Test alt"
},
"heading": "This is an article",
"subheading": "Articles leverage context components",
"paragraphs": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat ultricies consectetur. Duis vel ligula non nisi dignissim commodo vel dignissim nibh.</p>"
}
.article {
&__image {
height: 220px;
@include breakpoint(large) {
height: auto;
}
}
&__image + .context {
margin-top: 20px;
}
}
No notes defined.