<div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">Gaming</span>
<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">How-to videos</span>
<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">Vlogging</span>
</div>
{{#if items}}
<div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
{{#each items}}
<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">{{this}}</span>
{{/each}}
</div>
{{else}}
<span style="display:inline-flex;align-items:center;border-radius:999px;background:#efedf7;color:#4c4670;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;padding:4px 12px;white-space:nowrap;">{{label}}</span>
{{/if}}
{
"label": null,
"items": [
"Gaming",
"How-to videos",
"Vlogging"
]
}
Rounded-full pill for curated labels (e.g. auto-tagged topics on a video card, applied filters). Uses the component tint (#efedf7) signed off 2026-07-23, not the page tint (#F2EEF8), so it reads as a distinct element sitting on the page background.
Distinct from Badge’s topic tag: Badge’s topic tag is user-facing and clickable, Chip is a passive, applied label.
Row rule: any flex container holding chips (or pills) must set align-items:center explicitly. The default stretch inflates the shorter chips to the height of the tallest sibling in the row, this is what the “row” variant below demonstrates.