<div class="c-page-header-center o-container" data-bkg-theme="base">
<div class="o-row">
<div class="c-page-header-center__content o-col">
<h1 class="c-page-header-center__title f-title--h2">
Plant a pollinator garden
</h1>
<p class="c-page-header-center__eyebrow f-text--tag f-upper">Journal</p>
<ul class="c-page-header-center__tags">
<li class="c-page-header-center__tag">
<a class="c-tag f-text--tag" href=#>Topic tag</a>
</li>
<li class="c-page-header-center__tag">
<a class="c-tag f-text--tag" href=#>Topic tag</a>
</li>
<li class="c-page-header-center__tag">
<a class="c-tag f-text--tag" href=#>Topic tag</a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-page-header-center o-container" data-bkg-theme="base">
<div class="o-row">
<div class="c-page-header-center__content o-col">
<h1 class="c-page-header-center__title f-title--h2">
{{title}}
</h1>
<p class="c-page-header-center__eyebrow f-text--tag f-upper">{{eyebrow}}</p>
<ul class="c-page-header-center__tags">
{% if tags %}
{% for tag in tags %}
<li class="c-page-header-center__tag">
{% include '04-objects/tag' with tag %}
</li>
{% endfor %}
{% endif %}
</ul>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"eyebrow": "Journal",
"title": "Plant a pollinator garden",
"tags": [
{
"title": "Topic tag",
"link": "#"
},
{
"title": "Topic tag",
"link": "#"
},
{
"title": "Topic tag",
"link": "#"
}
]
}
.c-page-header-center {
display: flex;
justify-content: center;
text-align: center;
margin-top: 6rem;
margin-bottom: 6rem;
@include break($sm){
margin-top: 7.4rem;
margin-bottom: 3.8rem;
}
}
.c-page-header-center__content {
display: flex;
flex-direction: column;
}
.c-page-header-center__title {
order: 2;
margin-bottom: 1.5rem;
}
.c-page-header-center__eyebrow {
order: 1;
margin-bottom: 1.5rem;
}
.c-page-header-center__tags {
order: 3;
display: flex;
justify-content: center;
}
.c-page-header-center__tag {
padding: 0 1rem;
}
No notes defined.