This block is used indirectly in other components. The block is typically colored in the primary or secondary color.
The block consists of:
{% if heading_type is empty %}
{% set heading_type = 'h2' %}
{% endif %}
<div class="feature-block {{ modifier }}">
{% if title %}
{% include '@heading' with {
'heading': heading_type,
'heading_text': title
} %}
{% endif %}
{% if content %}
{% include '@paragraph' with {
'text': content
} %}
{% endif %}
</div>
<!-- Primary Color -->
<div class="feature-block primary dark-background">
<h1>This is the title</h1>
<p>Any variety of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<!-- Secondary Color -->
<div class="feature-block secondary">
<h1>This is the title</h1>
<p>Any variety of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
/* Primary Color */
{
"modifier": "primary dark-background",
"title": "This is the title",
"heading_type": "h1",
"content": "Any variety of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
}
/* Secondary Color */
{
"modifier": "secondary",
"title": "This is the title",
"heading_type": "h1",
"content": "Any variety of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
}
.feature-block {
@include theme('color', 'color-none', 'feature-block-primary-color');
@include theme('background-color', 'color-primary', 'feature-block-primary-background-color');
@include large-text();
padding: 30px;
@include tablet {
padding: 60px;
}
h2,
h3 {
@include theme('color', 'color-none', 'feature-block-primary-color');
margin-bottom: 20px;
}
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
&.secondary {
@include theme('color', 'color-zero', 'feature-block-secondary-color');
@include theme('background-color', 'color-secondary', 'feature-block-secondary-background-color');
h2,
h3 {
@include theme('color', 'color-zero', 'feature-block-secondary-color');
}
}
}