Code

A small selector for inline code


  • Display

    Inline

  • Selectors

    .code
  • Source

    GitHub ↗

This is inline code.
This is <code class='code'>inline code</code>.

Overview

The code element displays inline code in a monospace font and a color subtly different from the surrounding content. Inside of a content element, it is applied to the <code> tag.

Considerations

Spacing — Unless used inside a content element, the code element defines no margin. That means that you’ll need to manually position it inside your text itself.

Variants

Beyond customization, the code element has no variants.

Accessibility

Use with <code>. Using the .code element on a <code> tag will help screenreaders and other assistive technologies better represent your content.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

It's pretty simple. There's nothing to it. It's a .code element!
Example code
It's pretty simple. There's nothing to it. It's a <code class="code">.code</code> element!

Customization

Name Type Default Description
--code-color color var(--color-title) sets the color
--code-background color var(--color-light) sets the background color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.