Typography Components
Vue components for rendering text with consistent sizing from the design system's type scale.
Open in StorybookComponents
| Component | Use Case | Sizes |
|---|---|---|
Display | Hero text, large headings | 2xs–3xl |
Heading | Section headings | 3xs–4xl |
Body | Paragraph text | xs–2xl |
Label | Form labels, captions | 3xs–3xl |
PriceHeading | Financial amounts | 2xs–3xl |
ArticleBody | Long-form content | xs–3xl |
ArticleHeading | Article section titles | xs–3xl |
Usage
vue
<script setup>
import { Display, Heading, Body, Label } from '@yellowcard/b2b-design-system';
</script>
<template>
<Display size="xl">Welcome</Display>
<Heading size="lg">Account Overview</Heading>
<Body size="md">Your recent activity and balance summary.</Body>
<Label size="sm">Last updated: 2 hours ago</Label>
</template>Size Scale
All typography components accept a size prop. Available sizes vary by component:
Display
2xs | xs | sm | md | lg | xl | 2xl | 3xl
Heading
3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl
Body
xs | sm | md | lg | xl | 2xl
Label
3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl
Props (Common to All)
| Prop | Type | Default | Description |
|---|---|---|---|
size* | string | — | Text size from the type scale |
tag | string | — | HTML element to render (h1, h2, p, span, etc.) |
weight | string | — | Font weight override |
PriceHeading
Specialized for financial amounts with tabular number rendering:
vue
<script setup>
import { PriceHeading } from '@yellowcard/b2b-design-system';
</script>
<template>
<PriceHeading size="xl">₦1,250,000.00</PriceHeading>
</template>