Tag Strip
The tag strip is a layout container that arranges tag pills in a horizontal row with consistent spacing. It appears below article cards and on detail pages to display an article’s topic tags. The strip itself has no visual styling — no background, padding, or border — it simply provides the flex layout and gap between its .tinnitus-tag children.
This component uses naluma design system tokens.
BEM class: .tinnitus-tag-strip
Specifications
Section titled “Specifications”| Property | Value |
|---|---|
| Display | flex |
| Flex wrap | wrap |
| Gap | 8px |
| Background | None |
| Padding | None |
| Border | None |
Children are .tinnitus-tag atoms — see the Tag Pill documentation for child styling.
Showcase
Section titled “Showcase”Default strip
Tinnitus CBT Sound Therapy Sleep Habituation Research
Wrapping (many tags)
Tinnitus CBT Sound Therapy Sleep Habituation Mindfulness Research Hearing Loss Stress Management Relaxation
In context — research card
Cognitive Behavioral Therapy for Tinnitus
CBT significantly reduced tinnitus distress scores compared to waitlist control, with effects maintained at 12-month follow-up.
CBT Tinnitus Research
Usage Guidelines
Section titled “Usage Guidelines”- Always use with tag pill children. The strip is a container, not a standalone element. Its only children should be
.tinnitus-tagspans. - Wrapping is intentional. The strip uses
flex-wrap: wrapso tags flow to the next line naturally. Do not constrain height or hide overflow. - No maximum count, but consider UX. The strip technically supports any number of tags. Above 8—10 tags, the visual weight becomes heavy and scannability drops. Aim for 3—5 tags per article.
- No nested BEM elements. Unlike most WordPress components, the tag strip has no
__elementclasses. It is a simple flex container that wraps existing tag pill atoms.