<section class="hero hero--reversed hero--content-light" data-gradient-color="blue">
<div class="hero-content">
<div class="card" aria-labelledby="card-heading">
<div class="card-inner">
<div class="card-content">
<div class="card-content-inner">
<header class="card-header">
<h3 id="card-sub-heading" class="heading heading--category card-subheading">Lorem ipsum dolor sit amet</h3>
<h2 id="card-heading" class="heading heading--secondary card-heading">Lorem ipsum dolor sit amet</h2>
</header>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam.</p>
<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-media" data-media-type="image">
<div class="image">
<div class="image-inner">
<span style="padding-bottom: 55.55555555555556%;" class="image-placeholder"></span>
<img src="/temp/hero-example.jpg" alt="" srcset="/temp/hero-example.jpg 1x,/temp/hero-example@2x.jpg 2x" data-object-fit="cover" data-object-position="center center">
</div>
</div>
</div>
</section>
<{{ tagName|default('section') }} class="hero{% if heroModifiers is defined and heroModifiers|length %} hero--{{ heroModifiers|join(' hero--') }}{% endif %}"{% if heroGradientColor is defined and heroGradientColor %} data-gradient-color="{{ heroGradientColor }}"{% endif %}>
<div class="hero-content">
{% if 'campaign-headline' in heroModifiers %}
{% include '@campaign-headline' with {
campaignHeadlineHeading: heroHeading,
} %}
{% else %}
{% include '@card' with {
tagName: 'div',
cardSubheading: heroSubheading,
cardHeading: heroHeading,
cardBody: heroBody,
childComponents: heroComponents,
} only %}
{% endif %}
</div>
{% if heroMedia is defined and heroMedia %}
<div class="hero-media" data-media-type="{{ heroMedia['type']|default('image') }}">
{% include heroMedia['type'] is defined and heroMedia['type'] == 'video' ? '@video' : '@image' with heroMedia|merge({
attributes: {
'data-object-fit': 'cover',
'data-object-position': heroMedia['focalPoint']|default('center center')|replace('-', ' ')
}|merge(heroMedia['attributes'] is defined and heroMedia['attributes']|length ? heroMedia['attributes'] : {})
}) %}
</div>
{% endif %}
</{{ tagName|default('section') }}>
{
"heroGradientColor": "blue",
"heroModifiers": [
"reversed",
"content-light"
],
"heroMedia": {
"url": "/temp/hero-example.jpg",
"width": 1440,
"height": 800,
"alt": "",
"contain": false,
"transparent": false,
"retina": true,
"sizes": [
{
"url": "/temp/hero-example.jpg"
},
{
"url": "/temp/hero-example@2x.jpg"
}
]
},
"heroSubheading": "Lorem ipsum dolor sit amet",
"heroHeading": "Lorem ipsum dolor sit amet",
"heroBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n\t\t<p>Ut enim ad minim veniam.</p>\n\t\t<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>"
}
Only applicable in breakpoint ‘medium’ and larger.