Figure block

A more complex Block for controlling the alignment of a <picture>, or <figure> within it.

Example

Code sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="block block_figure">
  <picture>
    <source srcset="https://placekitten.com/1280/960" media="(min-resolution: 192dpi),(-webkit-min-device-ratio: 2)">
    <img src="https://placekitten.com/640/480" width="640" height="480" alt loading="lazy">
  </picture>
  <h3 class="heading heading_section">
    RoboCat™
  </h3>
  <div class="description">
    <p>
      The quick brown fox jumps over the lazy dog.<br>
      Sphinx of black quartz, judge my vow. Pack my box with five dozen liquor jugs.
    </p>
  </div>
  <p class="call_to_action">
    <a href="#" class="button button_primary button_theme_primary">
      More information
    </a>
    <small class="call_to_action__fineprint">
      Batteries sold seperately
    </small>
  </p>
</div>

Usage notes

Use a [data-image="…"] attribute to control the layout of the image. Valid values include… first, after, left, right.
If you use [data-image="left"] or [data-image="right"], you’ll need to wrap the text contents with a <div class="contents">
The .heading, .description, .call_to_action, and .call_to_action__fineprint elements are all considered optional.
Images will have a max-height of 400px when positioned to the left or right.
Use loading="lazy" for all images, unless this block is used in the Masthead strap

Source files