The author bio presents the article author in a landscape card format — a round avatar alongside the author’s name, a short biography, and links to their website and LinkedIn profile. It appears at the bottom of blog and research articles as a post footer, and can also be used on dedicated author pages.
The card uses a horizontal layout on desktop that stacks vertically and centers on mobile. This component uses naluma design system tokens (Literata headings, Plus Jakarta Sans body, warm earth palette).
Desktop — landscape layout
JE
Dr. Julia Engel
Audiologin und Tinnitus-Forscherin mit über 15 Jahren Erfahrung. Spezialisiert auf kognitive Verhaltenstherapie bei chronischem Tinnitus und Entwicklung digitaler Therapieansätze.
Mobile — stacked layout (375px)
JE
Dr. Julia Engel
Audiologin und Tinnitus-Forscherin mit über 15 Jahren Erfahrung. Spezialisiert auf kognitive Verhaltenstherapie bei chronischem Tinnitus und Entwicklung digitaler Therapieansätze.
The component follows BEM naming under the block .tinnitus-author-bio:
| Class | Element | Purpose |
|---|
.tinnitus-author-bio | Block | Card container with border |
__avatar | Child | Round author image (initials placeholder) |
__content | Child | Text content wrapper |
__name | Child | Author name heading |
__description | Child | Short biography (3-line max) |
__links | Child | Link row container |
__link | Child | Individual social link (icon + text) |
__link-icon | Child | SVG icon within a link |
Modifiers: --mobile (stacked layout), --small (60px avatar), --centered (center-aligned content and links).
| Property | Value |
|---|
| Display | flex (row) |
| Gap | 20px |
| Padding | 24px |
| Border radius | 8px |
| Background | #FFFFFF (--semantic-color-surface-card) |
| Border | 1px solid (--semantic-color-border-subtle) |
| Property | Desktop | Mobile |
|---|
| Size | 80 × 80px | 60 × 60px |
| Border radius | 50% | 50% |
| Background | --semantic-color-action-primary | |
| Text color | --primitive-color-white | |
| Font size | 28px | 22px |
| Font weight | 600 | 600 |
| 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 |
| Property | Value |
|---|
| Font family | Plus Jakarta Sans, system-ui, sans-serif |
| Font size | 14px |
| Font weight | 400 |
| Color | #3D2E2A (--semantic-color-text-primary) |
| Line height | 1.6 |
| Max lines | 3 (-webkit-line-clamp: 3) |
| Property | Value |
|---|
| Font size | 13px |
| Font weight | 500 |
| Color | --semantic-color-action-primary |
| Hover color | --semantic-color-action-primary-hover |
| Gap (icon to text) | 4px |
| Gap (between links) | 16px |
| Breakpoint | Layout |
|---|
| ≥640px | Horizontal: avatar left, content right |
| ≤639px | Vertical: avatar centered above content, text centered |
- Avatar is required. Use a round photo when available; fall back to initials on the primary action color background.
- Bio should be concise. Keep the biography to 2–3 sentences. The component enforces a 3-line clamp — longer text will be truncated with ellipsis.
- At least one link is expected. Show website and/or LinkedIn. If neither exists, omit the links row entirely rather than showing empty space.
- Link icons use
currentColor. Both SVG icons inherit the link text color, ensuring consistent colour on hover.