<article class="text-box ">
<div class="text-box__inner">
<div class="text-box__content">
<h2 class="text-box__heading">Text Box header</h2>
<p>Text Box content.</p>
</div>
</div>
</article>
<article class="text-box {{ modifier }}">
<div class="text-box__inner">
<div class="text-box__content">
<h2 class="text-box__heading">{{ heading.text }}</h2>
<p>{{{ text }}}</p>
</div>
{{#if link }}
{{> '@link' link }}
{{/if}}
</div>
</article>
{
"heading": {
"text": "Text Box header"
},
"text": "Text Box content."
}
/*
* Module: Text Box
*/
:root{
--text-box-background-color: var(--color-white);
--text-box-border-style: 1px solid var(--color-gray-light);
--text-box-border-radius: 4px;
--text-box-padding: 20px;
--text-box-paragraph-spacing-top: 15px;
}
.text-box {
&__heading {
font-size: 30px;
margin-bottom: 20px;
margin-top: 0;
@media (--viewport-sm-min) {
font-size: 40px;
}
}
p + p {
margin-top: var(--text-box-paragraph-spacing-top);
}
&--centered {
text-align: center;
}
}