Components

Things to build with. Each has a main class, classes for its parts, and classes for its variations. They draw everything from the tokens, so they follow the theme and the Appearance page, including the look applied to the site.

Button
Form field
Inputs, dropdowns and text areas
Input group
Checkboxes, radios and toggles
Card
Card list and grid list
Table
Badge
Callout
Toolbar
Description list
Empty state
Bar list
Progress
Disclosure
Tabs
Embed
Prose
Code block
Matrix

Button

An action: a <button>, an <a> or an <input type="submit">. A secondary button by default.

Class	What it does
`fz-btn`	A secondary button.
`fz-btn--primary`	The main action. Usually one per area.
`fz-btn--danger`	A destructive action, such as delete.
`fz-btn--ghost`	No border or background until hovered, for less important actions.
`fz-btn--{sm,lg}`	Smaller or larger.
`fz-btn--icon`	Square, for an icon on its own. Give it an aria-label.
`fz-btn--block`	The full width of its container.

Use a <button> for an action on the page and an <a> for going somewhere else; they look the same.
A disabled button, or one with aria-disabled="true", is faded.

Example

<div class="fz-cluster">
  <button type="button" class="fz-btn fz-btn--primary">Save</button>
  <button type="button" class="fz-btn">Cancel</button>
  <a href="#" class="fz-btn fz-btn--ghost">View history</a>
  <button type="button" class="fz-btn fz-btn--danger">Delete</button>
  <button type="button" class="fz-btn fz-btn--sm">Small</button>
  <button type="button" class="fz-btn fz-btn--lg">Large</button>
  <button type="button" class="fz-btn fz-btn--icon" aria-label="Settings">&#9881;</button>
  <button type="button" class="fz-btn" disabled>Disabled</button>
</div>

Form field

A label, a control and its help text.

Class	What it does
`fz-field`	The field: its label above its control.
`fz-field__label`	The label: a `<label for="…">`, or a `<legend>` on a `<fieldset>`.
`fz-field__req`	The required marker, inside the label.
`fz-field__body`	The control and its help text.
`fz-field__help`	Help text, or an error message.
`fz-field--horizontal`	The label beside the control, stacking when there isn't room.

For a group of choices, use fz-field on a <fieldset>, with a <legend class="fz-field__label">.
Connect help text to its control with aria-describedby, so screen readers read it too.

Example

<div class="fz-stack">
  <div class="fz-field">
    <label class="fz-field__label" for="sg-name">Student name <span class="fz-field__req" aria-hidden="true">*</span></label>
    <div class="fz-field__body">
      <input class="fz-input" id="sg-name" required aria-describedby="sg-name-help">
      <p class="fz-field__help" id="sg-name-help">As it appears on the student's report card.</p>
    </div>
  </div>
  <div class="fz-field fz-field--horizontal">
    <label class="fz-field__label" for="sg-school">School</label>
    <div class="fz-field__body"><input class="fz-input" id="sg-school"></div>
  </div>
</div>

Inputs, dropdowns and text areas

Text-like inputs, dropdowns and text areas, sharing one look. Their height is the field height, which the site's look sets.

Class	What it does
`fz-input`	An `<input>`: text, email, number, date and the like.
`fz-select`	A `<select>`, with its own chevron.
`fz-textarea`	A `<textarea>`, several lines, taller when dragged.

aria-invalid="true" marks a control as invalid. Say what is wrong in the field's help text too, since the colour alone doesn't.

Example

<div class="fz-auto-grid fz-auto-grid--max-2 fz-auto-grid--wide">
  <input class="fz-input" placeholder="A text input" aria-label="A text input">
  <select class="fz-select" aria-label="A dropdown"><option>Grade 6</option><option>Grade 7</option></select>
  <input class="fz-input" value="not-an-email" aria-invalid="true" aria-label="An invalid input">
  <input class="fz-input" value="Disabled" disabled aria-label="A disabled input">
  <textarea class="fz-textarea" placeholder="A text area" aria-label="A text area"></textarea>
</div>

Input group

An input with text or an icon attached before or after it, such as a currency or a unit.

Class	What it does
`fz-input-group`	Wraps an `fz-input` and its add-ons.
`fz-input-group__addon`	The attached text or icon.

Example

<div class="fz-input-group" style="max-width: 20rem">
  <span class="fz-input-group__addon">$</span>
  <input class="fz-input" inputmode="decimal" value="120.00" aria-label="Program fee">
  <span class="fz-input-group__addon">CAD</span>
</div>

Checkboxes, radios and toggles

Real checkboxes and radio buttons, drawn in the theme's colours; a toggle is a checkbox drawn as an on/off switch.

Class	What it does
`fz-checkbox`	An `<input type="checkbox">`.
`fz-radio`	An `<input type="radio">`.
`fz-toggle`	An `<input type="checkbox">` drawn as a switch.
`fz-choice`	A `<label>` around a checkbox, radio or toggle and its text, all of it clickable.
`fz-choice-group`	A set of choices, one below the other.

Example

<div class="fz-switcher">
  <fieldset class="fz-field">
    <legend class="fz-field__label">Transportation</legend>
    <div class="fz-choice-group">
      <label class="fz-choice"><input type="radio" class="fz-radio" name="sg-t" checked> Bus</label>
      <label class="fz-choice"><input type="radio" class="fz-radio" name="sg-t"> Picked up by a parent</label>
    </div>
  </fieldset>
  <div class="fz-choice-group">
    <label class="fz-choice"><input type="checkbox" class="fz-checkbox" checked> Photo consent</label>
    <label class="fz-choice"><input type="checkbox" class="fz-toggle" checked> Email updates</label>
  </div>
</div>

Card

A surface for one thing: an entry, a summary, a group of fields. Its children are stacked 3 steps apart.

Class	What it does
`fz-card`	The card.
`fz-card__header`	A row for the title and any actions, wrapping when out of room.
`fz-card__title`	The title, on a heading that fits the page (h2, h3…).
`fz-card__subtitle`	A line of secondary text under the title.
`fz-card__footer`	A row at the bottom, separated by a line.
`fz-card--flush`	No padding: for a table or an image that should reach the edges.
`fz-card--interactive`	The whole card is clickable, through its `fz-card__link`.
`fz-card__link`	The one link the whole card clicks through to: on the link, or on an element around it when the link is generated for you, such as by `viewEntryLink()` in a list template.

In an interactive card, other links and buttons still work on their own.

Example

<div class="fz-auto-grid fz-auto-grid--max-2 fz-auto-grid--wide">
  <article class="fz-card">
    <div class="fz-card__header">
      <div><h3 class="fz-card__title">Robotics club</h3><p class="fz-card__subtitle">Thursdays, 3:30 to 5pm</p></div>
      <span class="fz-badge fz-badge--success">Open</span>
    </div>
    <p>An after-school program for students in grades 6 to 8.</p>
    <div class="fz-card__footer"><span class="fz-text-muted fz-text-sm">18 of 24 places taken</span><button type="button" class="fz-btn fz-btn--sm fz-ms-auto">Register</button></div>
  </article>
  <article class="fz-card fz-card--interactive">
    <h3 class="fz-card__title"><a href="#" class="fz-card__link">Coding camp</a></h3>
    <p class="fz-text-muted">The whole card is a link.</p>
    <div class="fz-cluster"><span class="fz-badge fz-badge--warning">Waitlist</span></div>
  </article>
</div>

Card list and grid list

A list of entries shown as cards instead of table rows: one below the other, or in columns.

Class	What it does
`fz-card-list`	On a `<ul>` or `<ol>`: cards one below the other.
`fz-grid-list`	On a `<ul>` or `<ol>`: cards in columns, like `fz-auto-grid`.
`fz-grid-list--max-{2-6}`	At most this many columns.
`fz-grid-list--{narrow,wide}`	Columns as narrow as 8rem, or at least 18rem.

Give each <li> the fz-card class.

Example

<ul class="fz-grid-list fz-grid-list--max-3">
  <li class="fz-card fz-card--interactive"><h3 class="fz-card__title fz-card__link"><a href="#">Amira Haddad</a></h3><div class="fz-cluster"><span class="fz-badge fz-badge--success">Approved</span><span class="fz-badge">Grade 7</span></div></li>
  <li class="fz-card fz-card--interactive"><h3 class="fz-card__title fz-card__link"><a href="#">Liam Chen</a></h3><div class="fz-cluster"><span class="fz-badge fz-badge--warning">Under review</span><span class="fz-badge">Grade 8</span></div></li>
  <li class="fz-card fz-card--interactive"><h3 class="fz-card__title fz-card__link"><a href="#">Sofia Rossi</a></h3><div class="fz-cluster"><span class="fz-badge fz-badge--info">Submitted</span><span class="fz-badge">Grade 6</span></div></li>
</ul>

Table

A plain data table: a header row, a line under each row, and rows the row height, which the site's look sets.

Class	What it does
`fz-table`	On a `<table>`.
`fz-table--striped`	Every other row shaded.
`fz-table--multiline`	For rows whose cells hold more than a line, such as a title over a description: the cells line up at the top, with space above and below.

For a table wider than its container, wrap it in an element with fz-overflow-x-auto.

Example

<div class="fz-card fz-card--flush fz-overflow-x-auto">
  <table class="fz-table">
    <thead><tr><th>Student</th><th>School</th><th class="fz-text-end">Grade</th><th>Status</th></tr></thead>
    <tbody>
      <tr><td>Amira Haddad</td><td>Riverside Public School</td><td class="fz-text-end fz-tabular-nums">7</td><td><span class="fz-badge fz-badge--success">Approved</span></td></tr>
      <tr><td>Liam Chen</td><td>Lakeview Middle School</td><td class="fz-text-end fz-tabular-nums">8</td><td><span class="fz-badge fz-badge--warning">Under review</span></td></tr>
    </tbody>
  </table>
</div>

Badge

A short label: a status, a category, a count.

Class	What it does
`fz-badge`	A neutral badge, with a grey dot.
`fz-badge--{accent,info,success,warning,danger}`	A coloured tint and dot.
`fz-badge--plain`	No dot.
`fz-badge--icon`	A circle, for an icon on its own. Every one is the same size, so a column of them lines up. No dot.

The colour is in the tint and the dot; the text stays the normal text colour, so it is readable in every theme. The word should say what the status is: don't rely on the colour alone.
An icon on its own says nothing to someone who cannot see it, or does not know it. Give an icon badge a title, and the same words inside it in an element with fz-sr-only.

Example

<div class="fz-cluster">
  <span class="fz-badge">Draft</span>
  <span class="fz-badge fz-badge--info">Submitted</span>
  <span class="fz-badge fz-badge--warning">Under review</span>
  <span class="fz-badge fz-badge--success">Approved</span>
  <span class="fz-badge fz-badge--danger">Rejected</span>
  <span class="fz-badge fz-badge--accent fz-badge--plain">12 new</span>
  <span class="fz-badge fz-badge--icon fz-badge--warning" title="Featured">&#9733;<span class="fz-sr-only">Featured</span></span>
</div>

Callout

A message set apart from the content around it: instructions, a warning, the result of an action.

Class	What it does
`fz-callout`	A callout, in the accent colour.
`fz-callout--{info,success,warning,danger}`	A status callout.
`fz-callout__title`	A bold first line.

Add role="status" to a callout that appears because of something the user just did, so screen readers announce it.

Example

<div class="fz-stack fz-gap-3">
  <div class="fz-callout"><p class="fz-callout__title">Before you start</p><p>Have your student number and your school's address ready.</p></div>
  <div class="fz-callout fz-callout--success" role="status"><p>Your application was submitted.</p></div>
  <div class="fz-callout fz-callout--warning"><p>This entry has not been reviewed yet.</p></div>
  <div class="fz-callout fz-callout--danger"><p>The due date has passed.</p></div>
</div>

A row with a group at each end, such as a heading and its buttons, wrapping when it runs out of room.

Class	What it does
`fz-toolbar`	The row.
`fz-toolbar__start`	The group at the start.
`fz-toolbar__end`	The group at the end.

Example

<div class="fz-toolbar">
  <div class="fz-toolbar__start"><h2 class="fz-text-xl fz-font-semibold">Applications</h2><span class="fz-badge fz-badge--plain">48</span></div>
  <div class="fz-toolbar__end"><button type="button" class="fz-btn">Export</button><button type="button" class="fz-btn fz-btn--primary">New application</button></div>
</div>

Description list

Labelled values, such as an entry's fields in a card. On a <dl>; each <dt> and <dd> pair may be wrapped in a <div>.

Class	What it does
`fz-dl`	Terms and values side by side.
`fz-dl--stacked`	Each term above its value.

In a derived value, put the class on a <div> around the <dl> instead: <div class="fz-dl"><dl>...</dl></div>. A derived value's HTML is filtered before it is shown, and the filter takes the class off a <dl> but leaves it on a <div>.

Example

<div class="fz-switcher">
  <dl class="fz-dl">
    <dt>Student</dt><dd>Amira Haddad</dd>
    <dt>School</dt><dd>Riverside Public School</dd>
    <dt>Grade</dt><dd>7</dd>
  </dl>
  <dl class="fz-dl fz-dl--stacked">
    <div><dt>Submitted</dt><dd>September 12, 2026</dd></div>
    <div><dt>Status</dt><dd><span class="fz-badge fz-badge--success">Approved</span></dd></div>
  </dl>
</div>

Empty state

What to show where there is nothing to show yet, and what to do about it.

Class	What it does
`fz-empty`	A centred, outlined area.
`fz-empty__title`	Its heading.

Example

<div class="fz-empty">
  <p class="fz-empty__title">No applications yet</p>
  <p>They will appear here once students start submitting them.</p>
  <button type="button" class="fz-btn fz-btn--primary">Share the form</button>
</div>

Bar list

A few things compared by a number: for each, a label, a bar as long as its share, and the figure. For a breakdown by status or by category on a dashboard.

Class	What it does
`fz-bar-list`	The list.
`fz-bar-list--two-values`	Each row has two figures after its bar, such as a count and a percentage.
`fz-bar-list__row`	One thing: its label, its bar and its figure. The bar is the accent colour.
`fz-bar-list__row--{info,success,warning,danger,neutral}`	The bar in a status colour, or grey.
`fz-bar-list__label`	What the row is. It can hold an icon or a badge as well as text.
`fz-bar-list__track`	The full width a bar could be.
`fz-bar-list__bar`	The bar. Give it its width as a percentage, in a style attribute.
`fz-bar-list__value`	A figure.

It is made of <div> and <span> elements, in this order in each row: label, track with the bar in it, then the figures.
The figure says what the bar shows, so the bar itself needs no text of its own.
For a colour that is not one of the status colours, such as the steps of a scale, set --fz-tone on the row.
Work out the percentages in your code. The bar's width is the share of the whole; use the share of the largest one instead to compare the rows with each other.

Example

<div class="fz-bar-list fz-bar-list--two-values">
  <div class="fz-bar-list__row fz-bar-list__row--success">
    <span class="fz-bar-list__label">Approved</span>
    <span class="fz-bar-list__track"><span class="fz-bar-list__bar" style="width: 52%"></span></span>
    <span class="fz-bar-list__value">31</span>
    <span class="fz-bar-list__value fz-font-normal fz-text-muted">52%</span>
  </div>
  <div class="fz-bar-list__row fz-bar-list__row--warning">
    <span class="fz-bar-list__label">Under review</span>
    <span class="fz-bar-list__track"><span class="fz-bar-list__bar" style="width: 20%"></span></span>
    <span class="fz-bar-list__value">12</span>
    <span class="fz-bar-list__value fz-font-normal fz-text-muted">20%</span>
  </div>
  <div class="fz-bar-list__row fz-bar-list__row--danger">
    <span class="fz-bar-list__label">Rejected</span>
    <span class="fz-bar-list__track"><span class="fz-bar-list__bar" style="width: 8%"></span></span>
    <span class="fz-bar-list__value">5</span>
    <span class="fz-bar-list__value fz-font-normal fz-text-muted">8%</span>
  </div>
  <div class="fz-bar-list__row fz-bar-list__row--neutral">
    <span class="fz-bar-list__label">Draft</span>
    <span class="fz-bar-list__track"><span class="fz-bar-list__bar" style="width: 20%"></span></span>
    <span class="fz-bar-list__value">12</span>
    <span class="fz-bar-list__value fz-font-normal fz-text-muted">20%</span>
  </div>
</div>

Progress

One bar, as long as how far something has got: a score out of a total, steps done, money raised against a goal.

Class	What it does
`fz-progress`	The track. Give it `role="progressbar"` and the `aria-valuenow`, `aria-valuemin` and `aria-valuemax` it shows, or put the figure beside it in text.
`fz-progress--{info,success,warning,danger,neutral}`	The bar in a status colour, or grey. It is the accent colour otherwise.
`fz-progress__bar`	The bar. Give it its width as a percentage, in a style attribute.

For several bars side by side, each with its label and figure, use the bar list.
For a colour that is not one of the status colours, set --fz-tone on the track.

Example

<div class="fz-stack fz-gap-2" style="max-width: 20rem">
  <p><span class="fz-text-2xl fz-font-semibold fz-tabular-nums">$12,480</span> <span class="fz-text-muted">of $20,000 raised</span></p>
  <div class="fz-progress fz-progress--success" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"><span class="fz-progress__bar" style="width: 62%"></span></div>
</div>

Disclosure

Something that opens in place to show more: the detail behind a summary, a list that is usually not needed.

Class	What it does
`fz-disclosure`	On a `<details>`. Its `<summary>` is what is clicked, and the rest is what opens.
`fz-disclosure--plain`	No box of its own: for one that is inside a card.

Say in the summary what is inside, and how much of it if that helps: "Rankings (3)".
Add the open attribute to a <details> to have it start open.
It grows and shrinks as it opens and closes, unless the person has asked their computer for less motion. Some browsers open and close it at once.

Example

<div class="fz-stack fz-gap-2">
  <details class="fz-disclosure">
    <summary>Mitigations (2)</summary>
    <ul>
      <li>Two staff are present at every session.</li>
      <li>Sessions are held in rooms with a window in the door.</li>
    </ul>
  </details>
  <details class="fz-disclosure" open>
    <summary>Reviews (1)</summary>
    <p class="fz-text-muted">Reviewed on September 12, 2026. No changes needed.</p>
  </details>
</div>

Tabs

A row of tabs, each showing one part of a page in place of the others: the overview, the answers and the assessment of one report.

Class	What it does
`fz-tabs`	The row of tabs. Give it `role="tablist"` and an `aria-label`.
`fz-tabs__tab`	One tab: a `<button type="button">` with `role="tab"`, `aria-controls` naming its panel, and `aria-selected="true"` on the one that is shown and `"false"` on the others.
`fz-tab-panel`	What a tab shows. Give it `role="tabpanel"` and an id, and the `hidden` attribute when its tab is not the one selected.

Switching tabs takes a few lines of script, kept with the page: when a tab is clicked, set aria-selected on each tab and hidden on each panel.
On paper the tabs are left out and every panel prints, one after the other, so a printed copy has all of it.
Use tabs for parts of one thing that are read separately. For a choice that filters or changes what a list shows, use buttons with aria-pressed, or a choice.

Example

<div class="fz-stack fz-gap-4">
  <div class="fz-tabs" role="tablist" aria-label="Report">
    <button type="button" class="fz-tabs__tab" role="tab" aria-controls="tab-overview" aria-selected="true">Overview</button>
    <button type="button" class="fz-tabs__tab" role="tab" aria-controls="tab-interview" aria-selected="false">Interview</button>
    <button type="button" class="fz-tabs__tab" role="tab" aria-controls="tab-assessment" aria-selected="false">Assessment</button>
  </div>
  <div class="fz-tab-panel" id="tab-overview" role="tabpanel">
    <p>Met with the program lead on October 2. Enrolment is up on last year.</p>
  </div>
  <div class="fz-tab-panel" id="tab-interview" role="tabpanel" hidden>
    <p>The answers to each interview question.</p>
  </div>
  <div class="fz-tab-panel" id="tab-assessment" role="tabpanel" hidden>
    <p>The rating, and the reasons for it.</p>
  </div>
</div>

Embed

Something from elsewhere shown in the page: a map, a video, another site's page. It has a shape of its own, so the page doesn't jump when what is in it arrives.

Class	What it does
`fz-embed`	Around an `<iframe>`, `<video>` or `<img>`, which fills it. Wide: 16 by 9.
`fz-embed--square`	Square.

Give an <iframe> a title that says what it shows.
It is as wide as the space it is in. To limit it, put it in a column of a layout class, or give it a max-width in a style attribute.

Example

<div class="fz-embed" style="max-width: 24rem">
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23d1d1cb'/%3E%3C/svg%3E" alt="A grey rectangle, standing in for a map">
</div>

Prose

Running text that someone wrote: an article, instructions, an agreement, the contents of a rich text field, a reply from the AI assistant. Its paragraphs, headings, lists, code and tables are sized and spaced for reading.

Class	What it does
`fz-prose`	On the element around the text.

The elements inside need no classes: write ordinary <p>, <h2>, <ul>, <blockquote>, <code>, <pre> and <table>. That makes it the way to show text that came from an editor, and to give text headings and lists in a derived value, where the elements inside cannot keep classes of their own.
A code block (<pre>) and a table wider than the text scroll sideways, rather than making the page wider.
It is as wide as the space it is in. Long lines are hard to read, so put it in fz-container fz-container--narrow, or in a column.
It is for text. Lay out a page with the layout classes, not with this.

Example

<div class="fz-prose">
  <h2>Before the first session</h2>
  <p>Thank you for hosting a workshop. This page sets out what we bring, and what we ask of you.</p>
  <h3>We will bring</h3>
  <ul>
    <li>All the materials for each activity</li>
    <li>Two instructors, who arrive 30 minutes early to set up</li>
  </ul>
  <h3>We ask that you</h3>
  <ol>
    <li>Have a room with tables and a sink nearby</li>
    <li>Tell us about any allergies in the group</li>
  </ol>
  <blockquote>A teacher stays in the room for the whole session.</blockquote>
  <h3>Times</h3>
  <table>
    <thead><tr><th>Session</th><th>Arrive by</th></tr></thead>
    <tbody><tr><td>Morning</td><td>8:30am</td></tr><tr><td>Afternoon</td><td>12:30pm</td></tr></tbody>
  </table>
  <p>Book through the <code>workshops</code> form.</p>
</div>

Code block

Code, data or a log shown on its own: an example to copy, the response from a web service, the output of a script.

Class	What it does
`fz-code-block`	On a `<pre>`: monospaced, its lines kept as they were written, scrolling sideways when one is too long.
`fz-code-block--wrap`	Long lines wrap instead, for data such as JSON, where a line can be very long.

For code in running text, such as instructions with a command in them, use fz-prose, which styles the <pre> and <code> inside it.
To cap the height, set --fz-code-block-max-height on it, in a style attribute: it scrolls inside that height.
Escape what goes inside it, with htmlspecialchars() in PHP, so the code shows as text.

Example

<div class="fz-stack fz-gap-3">
  <pre class="fz-code-block"><code>&lt;div class="fz-card"&gt;
  &lt;h3 class="fz-card__title"&gt;Robotics club&lt;/h3&gt;
&lt;/div&gt;</code></pre>
  <pre class="fz-code-block fz-code-block--wrap" style="--fz-code-block-max-height: 6rem">{ "form_id": 12, "title": "Applications", "elements": [ { "handle": "applications_student", "type": "text" }, { "handle": "applications_school", "type": "text" }, { "handle": "applications_status", "type": "radio" } ] }</pre>
</div>

Matrix

A grid of cells, each coloured by what it stands for: a risk matrix, a heat map, a chart of what is free and what is taken.

Class	What it does
`fz-matrix`	On a `<table>`. Its columns are all the same width.
`fz-matrix__cell`	A cell: on a `<span>` inside the `<td>`, or on a `<button>` there when the cell can be chosen. Square, and grey.
`fz-matrix__cell--{info,success,warning,danger}`	A cell in a status colour.
`fz-matrix__cell--selected`	The cell that is chosen, or the one a value falls in: outlined.
`fz-matrix__cell--muted`	Faded: a cell that is beside the point while others are being looked at.

Give the rows and columns their headings with <th>, and say in each cell what it stands for: the colour alone is not enough.
The colour is a tint, and the text stays the normal text colour, as in a badge.
For colours that are not the status colours, such as the steps of a scale, set --fz-tone on the cell.

Example

<table class="fz-matrix" style="max-width: 24rem">
  <thead>
    <tr><td></td><th scope="col">Minor</th><th scope="col">Moderate</th><th scope="col">Major</th></tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Unlikely</th>
      <td><span class="fz-matrix__cell fz-matrix__cell--success">Low</span></td>
      <td><span class="fz-matrix__cell fz-matrix__cell--success">Low</span></td>
      <td><span class="fz-matrix__cell fz-matrix__cell--warning">Medium</span></td>
    </tr>
    <tr>
      <th scope="row">Possible</th>
      <td><span class="fz-matrix__cell fz-matrix__cell--success">Low</span></td>
      <td><span class="fz-matrix__cell fz-matrix__cell--warning fz-matrix__cell--selected">Medium</span></td>
      <td><span class="fz-matrix__cell fz-matrix__cell--danger">High</span></td>
    </tr>
    <tr>
      <th scope="row">Likely</th>
      <td><span class="fz-matrix__cell fz-matrix__cell--warning">Medium</span></td>
      <td><span class="fz-matrix__cell fz-matrix__cell--danger">High</span></td>
      <td><span class="fz-matrix__cell fz-matrix__cell--danger">High</span></td>
    </tr>
  </tbody>
</table>