A digital services project by FlexionCollection
layoutUSWDS-derived
A list of structured items with headings, descriptions, and optional metadata.
Reference: USWDS documentation ↗
Variants
Condensed
<ul class="flex-collection" data-variant="condensed">
<li class="flex-collection__item">
<div class="flex-collection__body">
<h3 class="flex-collection__heading"><a href="#">First condensed item</a></h3>
</div>
</li>
<li class="flex-collection__item">
<div class="flex-collection__body">
<h3 class="flex-collection__heading"><a href="#">Second condensed item</a></h3>
</div>
</li>
<li class="flex-collection__item">
<div class="flex-collection__body">
<h3 class="flex-collection__heading"><a href="#">Third condensed item</a></h3>
</div>
</li>
</ul>Default
Improving access to healthcare
We are working to improve access to healthcare for all Americans through better digital services.
Digital government strategy
The new strategy outlines key priorities for digital transformation across federal agencies.
<ul class="flex-collection">
<li class="flex-collection__item">
<div class="flex-collection__body">
<h3 class="flex-collection__heading"><a href="#">Improving access to healthcare</a></h3>
<p class="flex-collection__description">We are working to improve access to healthcare for all Americans through better digital services.</p>
<ul class="flex-collection__meta">
<li class="flex-collection__meta-item">Jan 15, 2026</li>
<li class="flex-collection__meta-item">Health</li>
</ul>
</div>
</li>
<li class="flex-collection__item">
<div class="flex-collection__body">
<h3 class="flex-collection__heading"><a href="#">Digital government strategy</a></h3>
<p class="flex-collection__description">The new strategy outlines key priorities for digital transformation across federal agencies.</p>
<ul class="flex-collection__meta">
<li class="flex-collection__meta-item">Feb 2, 2026</li>
<li class="flex-collection__meta-item">Technology</li>
</ul>
</div>
</li>
</ul>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-collection | .flex-collection | Collection list wrapper |
usa-collection__item | .flex-collection__item | Individual collection item |
usa-collection__body | .flex-collection__body | Item body content area |
usa-collection__heading | .flex-collection__heading | Item heading |
usa-collection__description | .flex-collection__description | Item description text |
usa-collection__meta | .flex-collection__meta | Item metadata list |
usa-collection__meta-item | .flex-collection__meta-item | Individual meta item |
usa-collection__img | .flex-collection__img | Item thumbnail image |
usa-collection--condensed | data-variant="condensed" | Condensed spacing variant |
Verified properties
font-familyfont-sizeline-heightpadding-leftmargin-topmargin-bottomborder-top-widthborder-top-styledisplaypadding-topIntentional differences
border-top-color: ours = var(--flex-color-border), USWDS = currentColor
We use our semantic border token; USWDS inherits from color cascade
Source CSS
/* flex-collection — USWDS Collection conformance
Variants: default, condensed */
.flex-collection {
font-size: 1.06rem;
margin-block: 1em;
line-height: 1.5;
padding-inline-start: 0;
list-style-type: none;
&:last-child {
margin-block-end: 0;
}
&[data-variant="condensed"] .flex-collection__item {
margin-block: 0.5rem;
padding-block-start: 0.5rem;
}
}
/* --- Item --- */
.flex-collection__item {
max-inline-size: 68ex;
margin-block: 1rem;
list-style-type: none;
padding-inline-start: 0;
align-items: flex-start;
border-block-start: 1px solid var(--flex-color-border);
display: flex;
padding-block-start: 1rem;
&:last-child {
margin-block-end: 0;
}
}
/* --- Thumbnail --- */
.flex-collection__img {
flex-shrink: 0;
inline-size: 5rem;
margin-inline-end: 1rem;
& img {
display: block;
inline-size: 100%;
block-size: auto;
}
}
/* --- Body --- */
.flex-collection__body {
flex: 1 1 0%;
}
/* --- Heading --- */
.flex-collection__heading {
font-size: 1.13rem;
font-weight: 700;
line-height: 1.3;
margin-block: 0;
& a {
color: var(--flex-color-accent);
text-decoration: underline;
&:hover {
color: var(--flex-blue-warm-vivid-70);
}
}
}
/* --- Description --- */
.flex-collection__description {
margin-block: 0.5rem;
}
/* --- Meta --- */
.flex-collection__meta {
margin-block: 0.25rem 0;
list-style-type: none;
padding-inline-start: 0;
& > li {
margin-block-end: 0;
max-inline-size: unset;
}
}
.flex-collection__meta-item {
margin-block-start: 0.25rem;
font-size: 0.93rem;
line-height: 1.3;
display: block;
margin-inline-end: 0.5rem;
}