<div class="c-page-header-media o-container" data-bkg-theme="base">
<div class="c-page-header-media__media">
<img src="/images/article/bee.jpg" alt="">
</div>
<div class="c-page-header-media__details">
<div class="c-page-header-media__details-info">
<p class="c-page-header-media__caption f-text--caption">Image caption goes here. Lorem ipsum dolor sit amet.</p>
<p class="c-page-header-media__credit f-text--credit">Credit:
Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="c-page-header-media o-container" data-bkg-theme="base">
<div class="c-page-header-media__media">
{% if mediaType == 'video' %}
{% include "04-objects/ambient-video" with {
videoPoster: videoPoster,
description: videoAltDescription,
videoUrl: videoUrl,
showDetails: false
} %}
{% else %}
{{ image }}
{% endif %}
</div>
<div class="c-page-header-media__details">
<div class="c-page-header-media__details-info">
{% if videoTitle %}
<h4 class="c-page-header-media__title f-title--h4">{{videoTitle}}</h4>
{% endif %}
{% if caption %}
<p class="c-page-header-media__caption f-text--caption">{{caption}}</p>
{% endif %}
{% if credit %}
<p class="c-page-header-media__credit f-text--credit">Credit:
{{credit}}</p>
{% endif %}
</div>
{% if mediaType == 'video' %}
<div class="c-page-header-media__details-audio">
<p class="c-page-header-media__audio f-text--credit f-italic">This video does not contain audio</p>
</div>
{% endif %}
</div>
</div>
{
"pageColorTheme": "teal",
"mediaType": "image",
"image": "<img src=\"/images/article/bee.jpg\" alt=\"\">",
"caption": "Image caption goes here. Lorem ipsum dolor sit amet.",
"credit": "Lorem ipsum dolor"
}
.c-page-header-media {
@include break($sm){
margin-top: 2.4rem;
margin-bottom: 3.8rem;
}
}
.c-page-header-media__details {
margin-top: 1.6rem;
@include break($sm) {
display: flex;
justify-content: space-between;
}
}
.c-page-header-media__details-info {
flex: 0 0 60%;
}
.c-page-header-media__caption + .c-page-header-media__credit {
margin-top: 0.4rem;
}
.c-page-header-media__details-audio {
margin-top: 0.6rem;
}
.c-page-header-media__title {
margin: 3rem 0;
}
No notes defined.