<div class="c-flexible-callout" data-bkg-theme="">
<div class="o-container">
<h2 id="flexible-callout-720" class="c-flexible-callout__title f-title--h3">Lorem Ipsum</h2>
<ul class="c-flexible-callout__items c-flexible-callout__items--6 o-row" aria-labelledby="flexible-callout-720">
<li class="c-flexible-callout__item o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/sample/flexible-callout-64.jpg" />
</div>
</div>
</a>
</div>
</li>
<li class="c-flexible-callout__item o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/sample/flexible-callout-64.jpg" />
</div>
</div>
</a>
</div>
</li>
<li class="c-flexible-callout__item o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/sample/flexible-callout-64.jpg" />
</div>
</div>
</a>
</div>
</li>
<li class="c-flexible-callout__item o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/sample/flexible-callout-64.jpg" />
</div>
</div>
</a>
</div>
</li>
<li class="c-flexible-callout__item o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/sample/flexible-callout-64.jpg" />
</div>
</div>
</a>
</div>
</li>
<li class="c-flexible-callout__item o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/sample/flexible-callout-64.jpg" />
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'flexible-callout-' ~ random(5000) %}
{% set titleSize = items|length == 4 ? 'xsmall' : items|length < 3 ? 'normal' : 'small' %}
{% set colClass = items|length == 4 ? 'o-col-sm-6 o-col-md-3' : items|length < 3 ? 'o-col-sm-6' : 'o-col-sm-4' %}
<div class="c-flexible-callout" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<h2 id="{{ hID }}" class="c-flexible-callout__title f-title--h3">{{ title }}</h2>
<ul class="c-flexible-callout__items c-flexible-callout__items--{{ items|length }} o-row" aria-labelledby="{{ hID }}">
{% for item in items %}
<li class="c-flexible-callout__item o-col {{ colClass }}">
{% include "04-objects/card" with item|merge({hSize: titleSize}) only %}
</li>
{% endfor %}
</ul>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Lorem Ipsum",
"items": [
{
"title": "Lorem ipsum dolor sit amet",
"image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos."
},
{
"title": "Lorem ipsum dolor sit amet",
"image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos."
},
{
"title": "Lorem ipsum dolor sit amet",
"image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos."
},
{
"title": "Lorem ipsum dolor sit amet",
"image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos."
},
{
"title": "Lorem ipsum dolor sit amet",
"image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos."
},
{
"title": "Lorem ipsum dolor sit amet",
"image": "<img src=\"/images/sample/flexible-callout-64.jpg\" />",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos."
}
]
}
.c-flexible-callout {
margin: 4.8rem 0;
@include break($sm) {
margin: 8.4rem 0;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 4.8rem 0;
@include break($sm) {
margin: 0;
padding: 8.4rem 0;
}
}
}
.c-flexible-callout__items--4 {
.o-card__text-description {
@include text--xsmall;
}
}
.c-flexible-callout__item {
margin-top: 5.4rem;
}
No notes defined.