<div class="section-intro">
<h2 class="headline-group ">
<span class="headline-group__head">Headline</span>
<span class="headline-group__sub">Optional Subhead</span>
</h2>
</div>
<div class="section-intro">
{% include '@headline-group' with { hg: section_intro.hg } %}
{% include '@p' with { p: section_intro.p } %}
{% include '@link' with { link: section_intro.link } %}
</div>
{
"section_intro": {
"hg": {
"super": null,
"headline": "Headline",
"sub": "Optional Subhead",
"tag": "h2"
},
"p": null,
"link": null
}
}
.section-intro {
:last-child {
margin-bottom: 0;
}
}
The section intro is a common pattern optionally included used to introduce both sections and blocks. It consists of a headline group, introductory paragraph, and an optional link.
It is structurally similar to a call to action, but a call to action should always have all three elements, the section intro should only require a headline.
Section intros used as introductions for blocks should probably never include a link; the block pattern has a separate link that is presented after the block.