<div class="numberCalloutCont">
<aside class="numberCallout numberCallout--">
<h3 class="numberCallout__title">282,891</h3>
<p class="numberCallout__body">Center-aligned layout for use when the page is two-column...Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</div>
<link media="all" rel="stylesheet" href="/number-callout/number-callout.css" />
<script src="/number-callout/number-callout.js"></script>
<div class="numberCalloutCont">
<aside class="numberCallout numberCallout--{{ modifier }}">
<h3 class="numberCallout__title">{{ number }}</h3>
<p class="numberCallout__body">{{ text }}</p>
</aside>
</div>
{% import "_macros.twig" as h %}
{{ h.componentAssets('number-callout') }}
{
"number": "282,891",
"text": "Center-aligned layout for use when the page is two-column...Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
import "./number-callout.scss";
.numberCalloutCont {
container-type: inline-size;
}
.numberCallout {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5em var(--gutterX);
border-top: 1px var(--neutral--dark) solid;
border-bottom: 1px var(--neutral--dark) solid;
padding: 1em var(--gutterX);
&--left {
flex-direction: row;
@container (width > 540px) {
justify-content: revert;
flex-wrap: nowrap;
.numberCallout__body {
text-align: left;
max-width: 100%;
}
}
}
}
.numberCallout__title {
font-size: var(--step-4);
color: var(--blue);
}
.numberCallout__body {
margin-block: 0;
text-align: center;
max-width: 670px;
}
Use .numberCallout.numberCallout--left to inline the number and text into 1 row on larger screens. Below 540px container width, the left variant wraps, centers, and looks identical to the center-aligned layout.
<div class="numberCalloutCont">
<aside class="numberCallout numberCallout--left">[...]</aside>
</div>The wrapper .numberCalloutCont is required for the container query to work on the component.