Code and keys

code

<code> is inline code and <kbd> is a key. Both are set in IBM Plex Mono on a tinted background, in every type set.

Basic

Run atlas build --watch and the site rebuilds on save. Press ⌘ K to open the command palette.

html

<p>Run <code>atlas build --watch</code> and the site rebuilds on save. Press <kbd>⌘</kbd> <kbd>K</kbd> to open the command palette.</p>

<kbd> carries an inset bottom edge, so a key reads as a key next to plain inline code.

On a colour panel

Where the pages land

Output goes to _site/, or wherever --out points.

html

<article data-tone="info">
  <h3>Where the pages land</h3>
  <p>Output goes to <code>_site/</code>, or wherever <code>--out</code> points.</p>
</article>

Inside a tone panel, inline code drops the page tint and takes a shade of the panel colour instead.

Notes

Code is always IBM Plex Mono, whatever data-type is set to.
--s72-code-inline sets the background of inline code on the page.
Long tokens wrap rather than push the page sideways: overflow-wrap: anywhere is on by default.