Prose

layoutUSWDS-derived

Typographic defaults for long-form content with USWDS measure (68ex reading width).

Variants

Default

This is a prose block with rich text content.

<div class="prose">
  <p>This is a prose block with <strong>rich text</strong> content.</p>
</div>

With Headings

Section heading

Paragraph content under a heading.

Subheading

With List

Choose an option:

First item
Second item
Third item

<div class="prose">
  <p>Choose an option:</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
</div>

Contract

Class mapping

USWDS	Flex	Notes
`usa-prose`	`.prose`	Prose container class

Verified properties

font-familyfont-sizeline-height

Intentional differences

font-family: ours = Source Sans Pro Web (sans-serif), USWDS = Merriweather Web (serif) for headings

We use sans-serif throughout for consistency with our design system

Source CSS

/* flex-prose — USWDS Prose conformance
   Reading-width constraint (68ex measure)
   Heading sizes, paragraph margins, list spacing
   Table, code, link, and hr styling within prose */

.prose {
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
  color: var(--flex-color-text);
}

/* --- Headings — USWDS uses serif (Merriweather) but we use sans intentionally --- */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-block-end: 0;
  margin-block-start: 0;
  clear: both;
}

.prose h1 {
  font-size: 2.44rem;
  line-height: 1.2;
  font-weight: 700;
  margin-block-start: var(--flex-space-xl);
  margin-block-end: var(--flex-space-md);
}

.prose h2 {
  font-size: 1.95rem;
  line-height: 1.2;
  font-weight: 700;
  margin-block-start: var(--flex-space-lg);
  margin-block-end: var(--flex-space-sm);
}

.prose h3 {
  font-size: 1.34rem;
  line-height: 1.2;
  font-weight: 700;
  margin-block-start: var(--flex-space-lg);
  margin-block-end: var(--flex-space-sm);
}

.prose h4 {
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 700;
  margin-block-start: var(--flex-space-lg);
  margin-block-end: var(--flex-space-sm);
}

.prose h5 {
  font-size: 0.91rem;
  line-height: 1.2;
  font-weight: 700;
  margin-block-start: var(--flex-space-md);
  margin-block-end: var(--flex-space-xs);
}

.prose h6 {
  font-size: 0.87rem;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-block-start: var(--flex-space-md);
  margin-block-end: var(--flex-space-xs);
}

/* --- Paragraphs — USWDS measure (reading width) --- */

.prose p {
  line-height: 1.5;
  max-inline-size: 68ex;
  margin-block-end: 1em;
}

/* --- Lists --- */

.prose ul,
.prose ol {
  margin-block-end: 1em;
  margin-block-start: 1em;
  line-height: 1.5;
  padding-inline-start: 3ch;
}

.prose li {
  margin-block-end: 0.25em;
  max-inline-size: 68ex;
}

.prose li:last-child {
  margin-block-end: 0;
}

.prose ul:last-child,
.prose ol:last-child {
  margin-block-end: 0;
}

.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol {
  margin-block-start: 0.25em;
}

/* --- Code --- */

.prose code {
  font-family: var(--flex-font-mono);
  font-size: var(--flex-text-sm);
  background: var(--flex-color-bg);
  padding: 0.125rem 0.375rem;
  border-radius: var(--flex-radius-sm);
}

.prose pre {
  background: var(--flex-color-bg);
  padding: var(--flex-space-md);
  border-radius: var(--flex-radius-md);
  overflow-x: auto;
  margin-block-end: var(--flex-space-md);
}

.prose pre code {
  background: none;
  padding: 0;
}

/* --- Links --- */

.prose a {
  color: var(--flex-color-accent);
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

/* --- Task lists (markdown checkboxes) --- */

.prose .task-list-item {
  list-style: none;
  margin-inline-start: calc(-1 * var(--flex-space-lg));
}

.prose .task-list-item input[type="checkbox"] {
  margin-inline-end: var(--flex-space-xs);
}

/* --- Misc --- */

.prose strong {
  font-weight: 700;
}

.prose hr {
  border: none;
  border-block-start: 1px solid var(--flex-color-border);
  margin: var(--flex-space-lg) 0;
}

/* --- Tables — USWDS prose table styles --- */

.prose table {
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--flex-color-text);
  margin: 1.25rem 0;
  inline-size: 100%;
}

.prose th {
  background-clip: padding-box;
  line-height: 1.3;
  background-color: var(--flex-color-table-header);
  color: var(--flex-color-text);
  font-weight: 600;
  text-align: start;
  padding: 0.5rem 1rem;
  border: 1px solid var(--flex-color-text);
}

.prose td {
  background-color: var(--flex-color-surface);
  font-weight: 400;
  padding: 0.5rem 1rem;
  border: 1px solid var(--flex-color-text);
}