A digital services project by FlexionList
layoutUSWDS-derived
Ordered and unordered lists with USWDS spacing and an unstyled variant.
Reference: USWDS documentation ↗
Variants
Ordered List
- Preheat oven to 350 degrees.
- Mix dry ingredients together.
- Add eggs and sugar to mixture.
<ol class="flex-list">
<li>Preheat oven to 350 degrees.</li>
<li>Mix dry ingredients together.</li>
<li>Add eggs and sugar to mixture.</li>
</ol>Unordered List
- Milk
- Eggs
- Bread
<ul class="flex-list">
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>Unstyled List
- Milk
- Eggs
- Bread
<ul class="flex-list" data-variant="unstyled">
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-list | .flex-list | Base list class |
usa-list--unstyled | data-variant="unstyled" | Unstyled list without bullets or padding |
Verified properties
margin-topmargin-bottompadding-leftline-heightlist-style-typeSource CSS
/* flex-list — USWDS List conformance
Variants: default, unstyled */
.flex-list {
margin-block: 1em;
line-height: 1.5;
padding-inline-start: 3ch;
&:last-child {
margin-block-end: 0;
}
li {
margin-block-end: 0.25em;
max-inline-size: 68ex;
&:last-child {
margin-block-end: 0;
}
}
ol,
ul {
margin-block-start: 0.25em;
}
/* --- Unstyled variant --- */
&[data-variant="unstyled"] {
margin-block: 0;
list-style-type: none;
padding-inline-start: 0;
> li {
margin-block-end: 0;
max-inline-size: unset;
}
}
}