Components

Core

Button Icons Image Logo Text Timestamp Title

Components

Accordion ArticleSummary Byline Correction FactBox Gallery Grade Lead Poll Pym Enrichment Quote Read More Article SectionHeader Subheading Tags Teaser TTSPlayer Tweet Who-is-Who

DNA/DESIGN

Border Radius Colors Layout Spacing Typography

TX-Book

AB AP BT E24 SA SVD VG

DNA Typography - VG

DNA typography utility classes for consistent text styling across brands.

Titles

Title LargeArticle headline, teaser headline, section headline
The quick brown fox jumps over the lazy dog
.title-large
Title MediumFactbox headline, list headline, paragraph header, teaser headline
The quick brown fox jumps over the lazy dog
.title-medium
Title SmallTeaser headline, factbox headline, related articles, source portraits
The quick brown fox jumps over the lazy dog
.title-small

Body Text

Body LargeArticle lead
The quick brown fox jumps over the lazy dog
.body-large
Body MediumArticle body, paragraphs, long text
The quick brown fox jumps over the lazy dog
.body-medium
Body SmallFactbox body, secondary body text
The quick brown fox jumps over the lazy dog
.body-small

Labels

Label LargeLarge labels, typically a bit larger than medium labels
The quick brown fox jumps over the lazy dog
.label-large
Label MediumButton, search forms, graphs, charts, bylines, timestamps
The quick brown fox jumps over the lazy dog
.label-medium
Label SmallSecondary information, graphs, charts, timestamps, meta
The quick brown fox jumps over the lazy dog
.label-small

Caption

CaptionImage caption, graphs, charts
The quick brown fox jumps over the lazy dog
.caption

About DNA Typography

DNA typography provides a consistent type system across all Schibsted brands. Each brand uses the same class names but with brand-specific font families, sizes, and weights. Use the bold modifier class to apply bold font weight.

Usage Examples

Apply typography classes directly to elements. Combine with the bold modifier:

<!-- HTML -->
<h1 class="title-large">Main Headline</h1>
<h2 class="title-medium bold">Bold Section Header</h2>
<p class="body-medium">Standard paragraph text</p>

<!-- React JSX -->
<h1 className="title-large">Main Headline</h1>
<p className="body-medium bold">Bold paragraph</p>