Topic Nav Grid
The topic nav grid is a landing page navigation pattern that presents tinnitus content categories as a responsive card grid. Each card acts as a wayfinding entry point, pairing a topic title with a short description so visitors can quickly identify and navigate to the area most relevant to them.
This component uses naluma design system tokens (Plus Jakarta Sans font, warm earth palette).
Showcase
Section titled “Showcase”Desktop — 5 columns, 16px gap
Understanding Tinnitus
What causes tinnitus, how it's diagnosed, and what to expect.
Sound Therapy
Masking, notched audio, and other sound-based approaches.
CBT & Mindfulness
Cognitive behavioral therapy and mindfulness techniques for relief.
Sleep & Tinnitus
Strategies for falling asleep and improving rest with tinnitus.
Latest Research
Recent studies, clinical trials, and emerging treatments.
Hover state — border shifts to burnt sienna (#A55838)
Understanding Tinnitus
What causes tinnitus, how it's diagnosed, and what to expect.
Responsive — tablet (3 cols) and mobile (1 col) adapt via CSS Grid
BEM Structure
Section titled “BEM Structure”The component follows BEM naming under the block .tinnitus-topic-nav-grid:
| Class | Element | Purpose |
|---|---|---|
.tinnitus-topic-nav-grid | Block | Grid container for topic cards |
__card | Child | Individual topic card |
__title | Child | Topic heading |
__description | Child | Brief topic summary |
Grid Specifications
Section titled “Grid Specifications”| Breakpoint | Columns | Gap |
|---|---|---|
| Desktop (> 1024px) | 5 | 16px |
| Tablet (641px — 1024px) | 3 | 16px |
| Mobile (≤ 640px) | 1 | 12px |
Card Specifications
Section titled “Card Specifications”| Property | Value |
|---|---|
| Display | flex (column) |
| Gap | 4px |
| Padding | 16px |
| Border radius | 8px |
| Background | #FFFFFF (--semantic-color-surface-card) |
| Border | 1px solid #F9DFAE (--semantic-color-border-subtle) |
Element Specifications
Section titled “Element Specifications”Title (__title)
Section titled “Title (__title)”| Property | Value |
|---|---|
| Font family | Plus Jakarta Sans, system-ui, sans-serif |
| Font size | 16px |
| Font weight | 600 |
| Color | #3D2E2A (--semantic-color-text-primary) |
| Line height | 1.4 |
Description (__description)
Section titled “Description (__description)”| Property | Value |
|---|---|
| Font family | Plus Jakarta Sans, system-ui, sans-serif |
| Font size | 14px |
| Font weight | 400 |
| Color | #7A6560 (--semantic-color-text-secondary) |
| Line height | 1.5 |
Hover State
Section titled “Hover State”On hover, the card border color transitions from #F9DFAE to the primary action color #A55838 (--semantic-color-action-primary) using a 150ms ease transition. No elevation change or shadow is added — the border color shift alone provides the interactive signal.
Usage Guidelines
Section titled “Usage Guidelines”- Five topics maximum. The grid is designed for exactly five cards to fill a single desktop row. Fewer cards leave visual gaps; more cards push to a second row and disrupt the balanced layout.
- Static block pattern. This is a manually curated navigation element, not a dynamic query. Topics and their descriptions are set in the block editor, not auto-generated from post categories.
- Keep descriptions to one line. Each description should be a single concise sentence. At typical card widths, this means roughly 8—12 words.
- Element order must be maintained. The visual hierarchy is title then description. Do not add icons, images, or badges to topic cards.
- Cards are not links by default. The block pattern wraps each card in an anchor when configured with a destination URL. The base card component itself has no link behavior built in.