Tag
layoutUSWDS-derived
A small label used to categorize or mark items.
Reference: USWDS documentation ↗
Variants
Big
New
<span class="flex-tag" data-size="big">New</span>Default
New
<span class="flex-tag">New</span>Multiple Tags
InfoDraftPending
<div><span class="flex-tag">Info</span><span class="flex-tag">Draft</span><span class="flex-tag">Pending</span></div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-tag | .flex-tag | Base tag class |
usa-tag--big | data-size="big" | Large tag size |
Verified properties
background-colorcolorfont-sizefont-familytext-transformborder-radiuspadding-toppadding-rightpadding-bottompadding-leftSource CSS
/* flex-tag — USWDS Tag conformance
Sizes: default, big */
.flex-tag {
font-size: 0.93rem;
color: var(--flex-white);
text-transform: uppercase;
background-color: var(--flex-gray-cool-60);
border-radius: 2px;
margin-inline-end: 0.25rem;
padding: 1px 0.5rem;
display: inline;
&:only-of-type {
margin-inline-end: 0;
}
/* --- Size: Big --- */
&[data-size="big"] {
padding-inline: 0.5rem;
font-size: var(--flex-text-uswds);
}
}
A digital services project by Flexion