<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"
}
  • Content:
    .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;
          }
        }
      }
    }
    
  • URL: /components/raw/people_preview/people_preview.scss
  • Filesystem Path: bits/04-components/people_preview/people_preview.scss
  • Size: 400 Bytes

Display a quick description of a person and their photo.