Statement block

Example

A composed statement block: the claim on the left, with an .kicker eyebrow, a heading, a lede, and a .text-link, paired with a portrait visual placeholder on the right that stands in for a real product image.

Composition

The statement block is a claim paired with a single supporting visual:

• Eyebrow, the .kicker label that frames the claim above the heading.
• Link, the .text-link that points to supporting detail.
• Visual placeholder: the portrait image stand-in that reinforces the point, replaced by a real product image in production.

Usage

The statement block makes one point land. Keep it to a single idea, then move on.

• One claim per block, keep the heading to one idea, not a list.
• Alternate the text and visual sides down the page, that's the Zigzag pattern.
• Let the visual reinforce the claim, it shouldn't repeat it back in words.
• Lead with the takeaway in the heading, then support it in the lede.
• Use a single Link for the next step, not a row of buttons.

Code

Link placeholder.css, then lay out a two-column grid with the claim on one side and a portrait .placeholder on the other side.

<link rel="stylesheet" href="/_shared/components/placeholder.css">

<div class="statement">
  <div>
    <p class="kicker">Privacy-first</p>
    <h2>Your data stays yours</h2>
    <p>First-party cookies only. No data shared with third parties, ever.</p>
    <a href="#" class="text-link">Read the privacy docs <span class="text-link-arrow">→</span></a>
  </div>

  <div class="placeholder" style="aspect-ratio:4/5">
    <i class="ph ph-image" aria-hidden="true"></i> image
  </div>
</div>