Research Card
The research card presents tinnitus research articles with a clear visual indicator of evidence strength. Each card surfaces the evidence level first, followed by the article title, a brief description, and publication metadata. The entire card is wrapped in a clickable link, making it a single tap target that navigates to the full article.
This component uses naluma design system tokens (Plus Jakarta Sans font, warm earth palette).
Showcase
Section titled “Showcase”Research cards — one per evidence level
CBT Shows Significant Improvement in Tinnitus Distress
A large-scale randomized controlled trial demonstrated that cognitive behavioral therapy reduced tinnitus distress scores by 42% compared to waitlist control, with effects sustained at 12-month follow-up.
Sound Therapy May Reduce Perception During Sleep
Participants using shaped sound therapy during sleep reported lower tinnitus awareness upon waking, though the study notes that placebo-controlled replication is needed to confirm the effect size.
New Biomarker Identified in Preliminary Study
Researchers identified a potential neural biomarker associated with chronic tinnitus using fMRI, but the small sample size and lack of replication limit the strength of these initial findings.
BEM Structure
Section titled “BEM Structure”The component follows BEM naming under the block .tinnitus-research-card:
| Class | Element | Purpose |
|---|---|---|
.tinnitus-research-card | Block | Card container |
__link | Wrapper | Anchor element wrapping the card, makes entire surface clickable |
__badge | Child | Evidence strength indicator (uses modifier for level) |
__title | Child | Article title |
__description | Child | Brief article summary |
__meta | Child | Publication source and year |
Badge modifiers: --strong, --moderate, --preliminary.
Base Specifications
Section titled “Base Specifications”| Property | Value |
|---|---|
| Display | flex (column) |
| Gap | 8px |
| Padding | 16px |
| Border radius | 8px |
| Background | #FFFFFF (--semantic-color-surface-card) |
| Border | 1px solid #F9DFAE (--semantic-color-border-subtle) |
| Box shadow | None |
Element Specifications
Section titled “Element Specifications”Evidence Badge (__badge)
Section titled “Evidence Badge (__badge)”The badge is always the first element in the card. It uses the same styling as the standalone Evidence Badge component.
| Property | Value |
|---|---|
| Font family | Plus Jakarta Sans, system-ui, sans-serif |
| Font size | 13px |
| Font weight | 600 |
| Padding | 4px 12px |
| Border radius | 4px |
Badge colors by evidence level (solid-fill, white text):
| Level | Background | Token |
|---|---|---|
| Strong | #98D398 | --semantic-color-feedback-success |
| Moderate | #D97706 | --semantic-color-feedback-warning |
| Preliminary | #DC2626 | --semantic-color-feedback-error |
Title (__title)
Section titled “Title (__title)”| Property | Value |
|---|---|
| Font family | Literata, Georgia, serif (--primitive-font-family-heading) |
| Font size | 18px |
| 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.6 |
Meta (__meta)
Section titled “Meta (__meta)”| Property | Value |
|---|---|
| Font family | Plus Jakarta Sans, system-ui, sans-serif |
| Font size | 13px |
| Font weight | 400 |
| Color | #7A6560 (--semantic-color-text-secondary) |
| Line height | 1.4 |
Link Wrapper (__link)
Section titled “Link Wrapper (__link)”The entire card is wrapped in an anchor element (.tinnitus-research-card__link) that navigates to the full article. This makes the whole card surface a single clickable area, which improves tap target size and is consistent with the one-action-per-card principle.
The link wrapper strips default anchor styling (text-decoration: none, color: inherit) so the card contents appear as designed rather than as hyperlinked text.
Usage Guidelines
Section titled “Usage Guidelines”- Evidence badge is required. Every research card must display an evidence level. Do not render a card without a badge — the evidence strength is the primary differentiator in the research feed.
- Element order must be maintained. The visual hierarchy is: badge, title, description, meta. Do not reorder elements.
- No box shadow on default state. The card uses a border (
1px solid #F9DFAE,--semantic-color-border-subtle) for definition rather than elevation. A subtle shadow may appear on hover via the link wrapper, but the resting state is flat. - Keep descriptions to two lines. The description should summarize the finding concisely. Truncate or edit content that extends beyond two lines at typical card widths.
- Meta format. Use the pattern
Source · Year(e.g., “Journal of Audiology · 2024”). Use a middle dot (·) as the separator.