Article Card
The article card presents blog content in a compact, scannable format — a landscape hero image on top, followed by the article title, reading time, and a short excerpt. It is designed for grid layouts on archive and category pages, typically displayed in rows of three on desktop.
This component is a sibling to the Research Card — both share the same card shell (white background, subtle gold border, 8px radius, hover shadow lift) but differ in content structure. The article card replaces the evidence badge with a hero image and uses reading time instead of publication metadata.
This component uses naluma design system tokens (Literata headings, Plus Jakarta Sans body, warm earth palette).
Showcase
Section titled “Showcase”Article cards — 3-column grid
Tinnitus und Schlaf: Strategien für bessere Nächte
Erfahren Sie bewährte Techniken, die Ihnen helfen können, trotz Tinnitus besser einzuschlafen und durchzuschlafen.
Kognitive Verhaltenstherapie bei chronischem Tinnitus
Wie CBT nachweislich Tinnitus-Belastung reduziert und welche konkreten Schritte Sie unternehmen können, um die Therapie zu beginnen.
Entspannungstechniken für den Alltag mit Tinnitus
Praktische Übungen zur Stressreduktion, die speziell für Menschen mit Tinnitus entwickelt wurden.
Single card — mobile width (375px)
BEM Structure
Section titled “BEM Structure”The component follows BEM naming under the block .tinnitus-article-card:
| Class | Element | Purpose |
|---|---|---|
.tinnitus-article-card | Block | Card container with overflow hidden |
__link | Wrapper | Anchor element wrapping the card, makes entire surface clickable |
__image | Child | Hero image area (16:9 aspect ratio) |
__body | Child | Text content wrapper below the image |
__title | Child | Article title |
__meta | Child | Reading time indicator |
__excerpt | Child | Brief article summary (2-line max) |
Base Specifications
Section titled “Base Specifications”| Property | Value |
|---|---|
| Display | flex (column) |
| Border radius | 8px |
| Background | #FFFFFF (--semantic-color-surface-card) |
| Border | 1px solid (--semantic-color-border-subtle) |
| Overflow | hidden (clips hero image to border radius) |
Body (__body)
Section titled “Body (__body)”| Property | Value |
|---|---|
| Padding | 16px |
| Gap | 8px |
Element Specifications
Section titled “Element Specifications”Hero Image (__image)
Section titled “Hero Image (__image)”| Property | Value |
|---|---|
| Aspect ratio | 16 : 9 |
| Width | 100% (full bleed) |
| Position | Top of card, above body content |
The image fills the card width and is clipped by the card’s overflow: hidden and border-radius. In the showcase, gradient placeholders represent actual article images.
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 |
Reading Time (__meta)
Section titled “Reading Time (__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 |
Excerpt (__excerpt)
Section titled “Excerpt (__excerpt)”| 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 |
| Max lines | 2 (-webkit-line-clamp: 2) |
Link Wrapper (__link)
Section titled “Link Wrapper (__link)”The entire card is wrapped in an anchor element that navigates to the full article. The link strips default styling (text-decoration: none, color: inherit) and adds a subtle box-shadow on hover (0 2px 8px rgba(0,0,0,0.08)), consistent with the Research Card hover behaviour.
Grid Layout
Section titled “Grid Layout”Article cards are designed for multi-column grids:
| Breakpoint | Columns |
|---|---|
| ≥840px | 3 columns, 16px gap |
| ≤839px | 1 column, 16px gap |
Usage Guidelines
Section titled “Usage Guidelines”- Hero image is required. Every article card must display an image. Use a meaningful photograph or illustration — avoid generic stock imagery.
- Element order must be maintained. The visual hierarchy is: image, title, reading time, excerpt. Do not reorder elements.
- Keep excerpts to two lines. The component enforces a 2-line clamp. Write concise summaries that work within this constraint.
- Reading time format. Use the pattern
N min read(e.g., “5 min read”). Always round to the nearest minute. - Relationship to Research Card. Both cards share the same shell styling. When mixing article and research cards in a single grid, the consistent border and radius ensure visual harmony while the different content structures (image vs badge) provide clear differentiation.