Prose
layoutUSWDS-derived
Typographic defaults for long-form content with USWDS measure (68ex reading width).
Reference: USWDS documentation ↗
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
More content here.
<div class="prose">
<h2>Section heading</h2>
<p>Paragraph content under a heading.</p>
<h3>Subheading</h3>
<p>More content here.</p>
</div>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-heightIntentional 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);
}
A digital services project by Flexion