Skip to main content

Typography

layered-ui-rails applies base typography styles to standard HTML elements via @layer base, so they can be overridden by the host application. Headings use the Manrope font and body text uses Inter.

Headings

Headings set type scale and weight only - they carry no divider, so the level can be chosen for document structure alone (for example an h2 inside a panel header or hero). Add l-ui-heading--section where a visual section rule is wanted, as the section headings on these documentation pages do.

Heading 1

Heading 2

Heading 3

Heading 4

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Section heading

Add l-ui-heading--section to any heading to draw a bottom divider that separates a section from the content above it. It applies to the heading element you already have, so it does not affect the heading level.

Section heading

Content for this section follows the divider.

<h2 class="l-ui-heading--section">Section heading</h2>
<p>Content for this section follows the divider.</p>

Paragraphs

This is a standard paragraph. Body text uses the Inter font at a small size with relaxed line height and muted foreground color.

Paragraphs can contain inline links which are styled with an underline and use the foreground color.

<p>This is a standard paragraph.</p>
<p>Paragraphs can contain <a href="#">inline links</a>.</p>

Horizontal rule

Use a horizontal rule to separate related blocks of content without adding a heading.

Account settings

Notification preferences

<p>Account settings</p>
<hr class="l-ui-hr">
<p>Notification preferences</p>

Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

With l-ui-list

  • Spaced list item one
  • Spaced list item two
  • Spaced list item three
<ul>
  <li>Unordered list item</li>
</ul>

<ol>
  <li>Ordered list item</li>
</ol>

<ul class="l-ui-list">
  <li>Spaced list item with bullet</li>
</ul>

Fonts

Font family tokens
Token Font stack Usage
font-manrope Manrope, ui-sans-serif, system-ui, sans-serif Headings and labels
font-inter Inter, ui-sans-serif, system-ui, sans-serif Body text and form fields

CSS reference

Typography CSS classes
Element / class Description
h1 Manrope bold, text-xl
h2 Manrope bold, text-lg
l-ui-heading--section Opt-in bottom divider for any heading (headings carry no divider by default)
h3 Manrope bold, base size
h4 Manrope bold, text-sm
p Muted foreground, text-sm, relaxed line height
p a Foreground color with bottom border underline
ul, ol, li Muted foreground, text-sm
l-ui-list Disc bullets, inside position, vertical spacing
l-ui-hr Horizontal rule with theme border and vertical spacing
code Muted foreground, text-sm