Fylgja Callout

A callout is a highlighted block that sets a note, tip, or warning apart from the prose around it. It is a <div class="callout"> holding a title paragraph and ordinary content, so the text inside behaves like any other text on the page.

Markdown plugins generate this markup from blockquote syntax, which is where most callouts on a documentation site come from. The markup is plain enough to write by hand too.

Preview

Note

Useful information that users should know, even when skimming the page.

<div class="callout" data-callout="note">
	<p class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/></svg>
		<strong>Note</strong>
	</p>
	<p>Useful information that users should know, even when skimming the page.</p>
</div>

Usage

  • Wrap the callout in a <div class="callout"> and put the type in data-callout.
  • Give it a <p class="callout-title"> holding an optional <svg> icon and a <strong> with the label.
  • Follow the title with ordinary content. Paragraphs, lists, and code blocks all space themselves, so nothing else is needed.
  • Mark the icon aria-hidden="true" and give it fill="currentcolor", so it takes the accent color and stays out of the accessibility tree.

For a callout the reader can fold away, see Callout Collapse.

Anatomy

  • .callout is the container. It draws the accent border, sets the padding, and holds the data-callout type.
  • .callout-title is the title row. It lays the icon and label out in a line and takes the accent color.
  • <strong> inside the title carries the weight. The component does not set one.
  • Everything after the title is plain content, styled by Fylgja Base.

Accessibility

  • A callout is regular content, not a live region, so it needs no role. Reserve role="alert" and role="status" for messages that appear after page load, such as a toast.
  • Do not rely on the accent color alone to carry the meaning. The title label is what a screen reader announces, so keep it explicit.
  • Mark decorative icons aria-hidden="true". The <strong> label already says what the icon repeats.

Variants

Five types ship, each with its own accent color that adapts to light and dark mode.

Note

Useful information that users should know, even when skimming the page.

Tip

Optional advice that helps a reader do the task better.

Important

Key information a reader needs to reach their goal.

Warning

Urgent information that needs immediate attention to avoid problems.

Caution

Advises about risks or negative outcomes of an action.

<div class="callout" data-callout="note">
	<p class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/></svg>
		<strong>Note</strong>
	</p>
	<p>Useful information that users should know, even when skimming the page.</p>
</div>
<div class="callout" data-callout="tip">
	<p class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"/></svg>
		<strong>Tip</strong>
	</p>
	<p>Optional advice that helps a reader do the task better.</p>
</div>
<div class="callout" data-callout="important">
	<p class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>
		<strong>Important</strong>
	</p>
	<p>Key information a reader needs to reach their goal.</p>
</div>
<div class="callout" data-callout="warning">
	<p class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>
		<strong>Warning</strong>
	</p>
	<p>Urgent information that needs immediate attention to avoid problems.</p>
</div>
<div class="callout" data-callout="caution">
	<p class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/></svg>
		<strong>Caution</strong>
	</p>
	<p>Advises about risks or negative outcomes of an action.</p>
</div>

The icon and the type are both optional. Without a data-callout type the callout falls back to your brand color, which makes it a neutral callout.

No icon needed

The icon is optional. Without one the title is just the label.

No type

Leave off data-callout and the callout uses your brand color.

<div class="callout" data-callout="tip">
	<p class="callout-title"><strong>No icon needed</strong></p>
	<p>The icon is optional. Without one the title is just the label.</p>
</div>
<div class="callout">
	<p class="callout-title"><strong>No type</strong></p>
	<p>Leave off data-callout and the callout uses your brand color.</p>
</div>

FAQ

How do I color a callout for a note, warning, or caution?

Put the type in a data-callout attribute on the callout. Five types ship, note, tip, important, warning, and caution. Anything else falls back to your brand color.

Does the component ship the icons?

No, the icon comes from your markup or your markdown plugin, so any icon set works. Give the svg a fill of currentcolor and it takes the accent color of the callout.

Why is the title wrapped in a strong tag?

The component ships three classes and leaves the rest to HTML, so the title takes its weight from strong rather than from CSS. A title without one renders at normal weight.