Typography Components

Vue components for rendering text with consistent sizing from the design system's type scale.

Open in Storybook

Components

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

<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:

<script setup>
import { PriceHeading } from '@yellowcard/b2b-design-system';
</script>

<template>
  <PriceHeading size="xl">₦1,250,000.00</PriceHeading>
</template>