<section class="people_preview container-fluid mb-3">
<div class="row">
<div class="people_preview-content col-12 col-md-7 col-lg-8 col-xl-9">
<h2>Test Person</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit metus, consectetur in volutpat ut, venenatis sit amet ante. Aenean eu dui in leo semper <a href="#">aliquet at sit</a> amet eros. Mauris fermentum lobortis lectus, eget volutpat elit blandit non. Nulla facilisi. Morbi interdum eros vel dignissim ultrices.</p>
</div>
<div class="people_preview-img col-12 col-md-5 col-lg-4 col-xl-3">
<div class="people_preview-image_wrapper">
<picture class="image large">
<img src="/img/lava-2.jpg" alt="hot lava" />
</picture>
<div class="people_preview-img_caption">
This is the caption
</div>
</div>
</div>
</div>
</section>
<section class="people_preview container-fluid mb-3">
<div class="row">
<div class="people_preview-content col-12 col-md-7 col-lg-8 col-xl-9">
{% block people_preview_content %}
{{ content }}
{% endblock people_preview_content %}
</div>
<div class="people_preview-img col-12 col-md-5 col-lg-4 col-xl-3">
<div class="people_preview-image_wrapper">
{% block people_preview_img %}
{% include "@images--large" %}
{% endblock people_preview_img %}
{% if caption %}
<div class="people_preview-img_caption">
{% if (caption) %}
{{ caption|raw }}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
{
"content": "<h2>Test Person</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit metus, consectetur in volutpat ut, venenatis sit amet ante. Aenean eu dui in leo semper <a href=\"#\">aliquet at sit</a> amet eros. Mauris fermentum lobortis lectus, eget volutpat elit blandit non. Nulla facilisi. Morbi interdum eros vel dignissim ultrices.</p>",
"img_src": "/img/lava-2.jpg",
"img_alt": "hot lava",
"caption": "This is the caption"
}
.people_preview {
&-content {
h2 {
font-size: 2rem;
}
}
&-image_wrapper {
width: fit-content;
}
&-img {
img {
width: 100%;
}
&_caption {
position: relative;
width: 100%;
background-color: $grey_darkest;
color: $white;
padding: $space_one_half;
font-size: .875rem;
p {
margin: 0;
}
}
}
}
Display a quick description of a person and their photo.