Content blocks

Callout

A light panel with a 4px bar that sets a note or a status message apart from the copy.

Block: .hs-callout
CSS: components/callout.css (in /brand.css)
JS: None
Status: Decided
Decided in: Components round 1
Markdown: /components/callout.md

What it is

A note set apart from the copy. The title carries the meaning; the colour and the icon repeat it. Body text is ink on every surface. A callout stays light on any ground.

When to use

A plain help note that is not a status, such as "We're always here to help" on a FAQ page (base .hs-callout).
A condition the reader must meet first, such as "Your certificate needs an active membership" (--info).
A confirmation after an action, such as a saved profile (--success).
A risk the reader must avoid, such as printing the ring size sheet at the wrong scale (--warning).
A form that failed: a danger callout at the top of the form, with one link per error to its field (--danger).

When not to use

A short condition, source or "as of" line under content: use Fine print.
Legal or participation terms: use Disclosure.
A member testimonial: use Quote.
A list with nothing in it yet: use Empty state.

Rules

Markup: <aside class="hs-callout">, an optional .hs-callout__icon SVG, then .hs-callout__body with .hs-callout__title first.
Write a title that carries the full meaning. Colour and icon only repeat it.
Use the base class for a plain note and --info only for an info status, so each keeps its meaning. Add at most one status modifier: --info, --success, --warning or --danger.
Use blue only as the bar and the icon, never as small text.
Use the callout on any ground with no modifier. It stays a light panel and resets the link colours inside it to the light-ground colours.
Give a link inside it .hs-link, plus the two PostHog attributes (data-ph-capture-attribute-cta, data-ph-capture-attribute-cta-loc).

Accessibility

Body text and title are ink on every surface: 11.3:1 or more.
Bar and icon on their surface: blue 4.6:1, success 4.8:1, warning 4.5:1, danger 4.8:1 (3:1 needed).
A static note takes no role. A message injected after an action takes role="status". An error takes role="alert".
A form alert takes role="alert" and receives focus after submit.
The icon takes aria-hidden="true" focusable="false": the title already says what the icon shows.
The callout needs no JavaScript and has no motion.

Variants

Note (neutral)

Soft ground, line-strong bar, slate icon. For a plain note that is not a status.

Preview on white

<aside class="hs-callout">
  <svg class="hs-callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.5V17H6.5A2.5 2.5 0 0 1 4 14.5z"/></svg>
  <div class="hs-callout__body">
    <p class="hs-callout__title">We&rsquo;re always here to help</p>
    <p>Member Services answers questions about membership, benefits, billing and your account. <a class="hs-link" href="/contact" data-ph-capture-attribute-cta="contact" data-ph-capture-attribute-cta-loc="faq-help">Contact Member Services</a></p>
  </div>
</aside>

Info

Info surface, blue bar (bar only: never blue small text).

Preview on white

<aside class="hs-callout hs-callout--info">
  <svg class="hs-callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 11v5.5"/><path d="M12 7.6v.1"/></svg>
  <div class="hs-callout__body">
    <p class="hs-callout__title">Your certificate needs an active membership</p>
    <p><a class="hs-link" href="/memberdues" data-ph-capture-attribute-cta="dues" data-ph-capture-attribute-cta-loc="certificate">Activate your membership</a></p>
  </div>
</aside>

Success

Add role="status" when the message appears after an action.

Preview on white

<aside class="hs-callout hs-callout--success" role="status">
  <svg class="hs-callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="m8 12.3 2.7 2.7L16 9.6"/></svg>
  <div class="hs-callout__body">
    <p class="hs-callout__title">Your profile is saved.</p>
  </div>
</aside>

Warning

Ring size tool copy.

Preview on white

<aside class="hs-callout hs-callout--warning">
  <svg class="hs-callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.3 4.2 2.8 17.5A2 2 0 0 0 4.5 20.5h15a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4.5"/><path d="M12 17.2v.1"/></svg>
  <div class="hs-callout__body">
    <p class="hs-callout__title">Print it at 100%</p>
    <p>If your printer scales it to fit the page &mdash; &ldquo;fit to page&rdquo;, &ldquo;shrink to fit&rdquo; &mdash; every size on the sheet comes out wrong.</p>
  </div>
</aside>

Danger

Add role="alert" for a form error that appears after submit.

Preview on white

<aside class="hs-callout hs-callout--danger" role="alert">
  <svg class="hs-callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6"/><path d="m15 9-6 6"/></svg>
  <div class="hs-callout__body">
    <p class="hs-callout__title">Another account already uses this email address.</p>
  </div>
</aside>

On navy

The callout keeps its light surface and resets the colours inside it.

Preview on navy

<aside class="hs-callout hs-callout--warning">
  <svg class="hs-callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.3 4.2 2.8 17.5A2 2 0 0 0 4.5 20.5h15a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4.5"/><path d="M12 17.2v.1"/></svg>
  <div class="hs-callout__body">
    <p class="hs-callout__title">Print it at 100%</p>
    <p>If your printer scales it to fit the page, every size on the sheet comes out wrong.</p>
  </div>
</aside>