A digital services project by FlexionCard
layoutUSWDS-derived
A card groups related content in a container with header, body, media, and footer sections.
Reference: USWDS documentation ↗
Variants
Default
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
<div class="flex-card">
<div class="flex-card__container">
<div class="flex-card__header">
<h2 class="flex-card__heading">Card Title</h2>
</div>
<div class="flex-card__media">
<div class="flex-card__img">
<img src="/static/img/hero.jpg" alt="Placeholder"/>
</div>
</div>
<div class="flex-card__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
</div>
<div class="flex-card__footer"><a class="flex-button" href="/example">Visit</a></div>
</div>
</div>Flag
Flag Layout
Horizontal layout with image on the left.
<div class="flex-card" data-variant="flag">
<div class="flex-card__container">
<div class="flex-card__header">
<h2 class="flex-card__heading">Flag Layout</h2>
</div>
<div class="flex-card__media">
<div class="flex-card__img">
<img src="/static/img/hero.jpg" alt="Placeholder"/>
</div>
</div>
<div class="flex-card__body">
<p>Horizontal layout with image on the left.</p>
</div>
</div>
</div>Flag Media Right
Flag Media Right
Horizontal layout with image on the right.
<div class="flex-card" data-variant="flag" data-media-right="true">
<div class="flex-card__container">
<div class="flex-card__header">
<h2 class="flex-card__heading">Flag Media Right</h2>
</div>
<div class="flex-card__media">
<div class="flex-card__img">
<img src="/static/img/hero.jpg" alt="Placeholder"/>
</div>
</div>
<div class="flex-card__body">
<p>Horizontal layout with image on the right.</p>
</div>
</div>
</div>Header First
Header First
The header appears above the media in this variant.
<div class="flex-card" data-variant="header-first">
<div class="flex-card__container">
<div class="flex-card__header">
<h2 class="flex-card__heading">Header First</h2>
</div>
<div class="flex-card__media">
<div class="flex-card__img">
<img src="/static/img/hero.jpg" alt="Placeholder"/>
</div>
</div>
<div class="flex-card__body">
<p>The header appears above the media in this variant.</p>
</div>
<div class="flex-card__footer"><a class="flex-button" href="/example">Visit</a></div>
</div>
</div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-card | .flex-card | Outer card wrapper |
usa-card__container | .flex-card__container | Inner card container with border and background |
usa-card__header | .flex-card__header | Card header section |
usa-card__heading | .flex-card__heading | Card heading text |
usa-card__media | .flex-card__media | Card media wrapper |
usa-card__img | .flex-card__img | Card image container |
usa-card__body | .flex-card__body | Card body content |
usa-card__footer | .flex-card__footer | Card footer section |
usa-card--flag | data-variant="flag" | Horizontal flag layout variant |
usa-card--header-first | data-variant="header-first" | Header above media variant |
usa-card--media-right | data-media-right | Media on right side (flag variant) |
usa-card__media--inset | data-inset-media | Media with padding inset |
Verified properties
border-widthborder-styleborder-colorborder-radiusbackground-colorcolorfont-familydisplayflex-directionpadding-toppadding-rightpadding-bottompadding-leftIntentional differences
border-color: ours = var(--flex-gray-cool-10), USWDS = #dfe1e2
We use semantic token that resolves to the same value in light mode
Source CSS
/* flex-card — USWDS Card conformance
Variants: default, flag, header-first
Modifiers: data-media-right, data-inset-media, data-exdent */
/* --- Base card --- */
.flex-card {
margin-block-end: 2rem;
max-inline-size: none;
&:last-child {
margin-block-end: 2rem;
}
}
.flex-card__container {
color: var(--flex-color-text);
background-color: var(--flex-color-surface);
font-size: 1.06rem;
line-height: 1.5;
border-width: 2px;
border-color: var(--flex-gray-cool-10);
border-style: solid;
display: flex;
block-size: 100%;
flex-direction: column;
margin-inline-start: 0.5rem;
margin-inline-end: 0.5rem;
position: relative;
border-radius: 0.5rem;
}
.flex-card:not([data-variant="flag"]) .flex-card__container > :only-child {
padding: 1.5rem;
}
/* --- Header --- */
.flex-card__header {
padding-block-start: 1.5rem;
padding-block-end: 0.5rem;
padding-inline: 1.5rem;
&:last-child {
padding-block-end: 1.5rem;
}
}
.flex-card__heading {
font-size: 1.34rem;
line-height: 1.2;
margin: 0;
}
/* --- Media --- */
.flex-card__media {
order: -1;
min-block-size: 1px;
}
.flex-card .flex-card__img {
display: block;
}
.flex-card__img {
border-start-start-radius: calc(0.5rem - 2px);
border-start-end-radius: calc(0.5rem - 2px);
background-color: var(--flex-gray-5);
position: relative;
overflow: hidden;
}
.flex-card__img img {
display: block;
block-size: 100%;
inline-size: 100%;
object-fit: cover;
}
/* --- Inset media --- */
.flex-card__media[data-inset-media],
.flex-card [data-inset-media] .flex-card__media {
padding-block-start: 1.5rem;
padding-inline-start: 1.5rem;
padding-inline-end: 1.5rem;
}
.flex-card__media[data-inset-media] .flex-card__img,
.flex-card [data-inset-media] .flex-card__img {
border-radius: 0;
}
/* --- Body --- */
.flex-card__body {
flex: 1 1 0%;
padding-block: 0.5rem;
padding-inline: 1.5rem;
flex-basis: auto;
&:last-child {
padding-block-end: 1.5rem;
}
&:first-child {
padding-block-start: 1.5rem;
}
&:only-child {
padding-block-end: 1.5rem;
padding-block-start: 1.5rem;
}
}
/* --- Footer --- */
.flex-card__footer {
padding-block-start: 0.5rem;
padding-block-end: 1.5rem;
padding-inline: 1.5rem;
}
/* --- Content reset --- */
.flex-card__body > :last-child,
.flex-card__header > :last-child {
padding-block-end: 0;
margin-block-end: 0;
}
.flex-card__body > :first-child,
.flex-card__header > :first-child {
margin-block-start: 0;
padding-block-start: 0;
}
.flex-card__body > :only-child,
.flex-card__header > :only-child {
margin-block-end: 0;
margin-block-start: 0;
padding-block-end: 0;
padding-block-start: 0;
}
/* --- Variant: header-first --- */
.flex-card[data-variant="header-first"] .flex-card__media {
order: 0;
}
.flex-card[data-variant="header-first"] .flex-card__header {
padding-block-end: 0.5rem;
}
.flex-card[data-variant="header-first"] .flex-card__body {
padding-block-start: 0.5rem;
}
.flex-card[data-variant="header-first"] .flex-card__img {
border-radius: 0;
}
/* --- Variant: flag (horizontal layout) --- */
.flex-card[data-variant="flag"] .flex-card__media {
display: flex;
overflow: hidden;
inset-block-end: 0;
inset-block-start: 0;
inset-inline-start: 0;
position: absolute;
inline-size: 15rem;
}
.flex-card[data-variant="flag"] .flex-card__img {
border-radius: 0;
border-start-start-radius: calc(0.5rem - 2px);
border-end-start-radius: calc(0.5rem - 2px);
}
.flex-card[data-variant="flag"] .flex-card__body,
.flex-card[data-variant="flag"] .flex-card__footer,
.flex-card[data-variant="flag"] .flex-card__header {
margin-inline-start: 15rem;
}
/* --- Flag + media-right --- */
.flex-card[data-variant="flag"][data-media-right] .flex-card__media {
inset-inline-start: auto;
inset-inline-end: 0;
}
.flex-card[data-variant="flag"][data-media-right] .flex-card__img {
border-radius: 0;
border-start-end-radius: calc(0.5rem - 2px);
border-end-end-radius: calc(0.5rem - 2px);
}
.flex-card[data-variant="flag"][data-media-right] .flex-card__body,
.flex-card[data-variant="flag"][data-media-right] .flex-card__footer,
.flex-card[data-variant="flag"][data-media-right] .flex-card__header {
margin-inline-start: 0;
margin-inline-end: 15rem;
}
/* Flag variant: stack at narrow container widths */
@container (max-inline-size: 30rem) {
.flex-card[data-variant="flag"] .flex-card__media {
position: static;
inline-size: auto;
}
.flex-card[data-variant="flag"] .flex-card__img {
border-radius: 0;
border-start-start-radius: calc(0.5rem - 2px);
border-start-end-radius: calc(0.5rem - 2px);
}
.flex-card[data-variant="flag"] .flex-card__body,
.flex-card[data-variant="flag"] .flex-card__footer,
.flex-card[data-variant="flag"] .flex-card__header {
margin-inline-start: 0;
margin-inline-end: 0;
}
.flex-card[data-variant="flag"][data-media-right] .flex-card__img {
border-radius: 0;
border-start-start-radius: calc(0.5rem - 2px);
border-start-end-radius: calc(0.5rem - 2px);
}
}
/* --- Card group --- */
.flex-card-group {
margin-block-end: 0;
margin-block-start: 0;
list-style-type: none;
padding-inline-start: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
margin-inline-start: -0.5rem;
margin-inline-end: -0.5rem;
container-type: inline-size;
}
.flex-card-group > .flex-card {
margin-inline-start: 0.5rem;
margin-inline-end: 0.5rem;
}
/* --- Legacy content-card support --- */
.content-card {
background: var(--flex-color-surface);
border: 1px solid var(--flex-color-border);
border-radius: var(--flex-radius-md);
padding: var(--flex-space-lg);
}
.content-card h2 {
font-size: 1.1em;
font-weight: 600;
color: var(--flex-color-text);
margin-block-end: var(--flex-space-xs);
}
.content-card h2 a {
color: var(--flex-color-accent);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.content-card p {
font-size: var(--flex-text-base);
color: var(--flex-color-text-muted);
line-height: 1.5;
}
.content-card .card-meta {
display: flex;
flex-wrap: wrap;
gap: var(--flex-space-xs);
margin-block-start: var(--flex-space-sm);
}
.catalog-group-label {
font-size: var(--flex-font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--flex-color-text-muted);
margin-block-end: var(--flex-space-sm);
}
/* Active filter chip — the navigation link representing the current page filter. */
nav[aria-label="Filter components by kind"] a[aria-current="page"] {
font-weight: 700;
color: var(--flex-color-accent);
text-decoration: underline;
}