Typography

The typography foundation exports lightweight React primitives with predefined Tailwind classes for headings, body text, links, code, quotes, and lists. These components inherit the active font family from the application; in this docs site, the base font is Inter. All components also accept className, which is merged with the default classes.

Branding themes override that inherited font — EOSC uses Roboto and eLTER uses Montserrat for headings. Those font files are not bundled with the library; see Theme Fonts for how to load them in your app.

Preview

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph text uses text-base with leading-7 for comfortable reading.

Lead text is larger and uses muted foreground color.

Strong is rendered as a paragraph with semibold weight.

Small text uses muted foreground and leading-6.

Muted text is the smallest text style in the set.

const greeting = "Hello World";Standard link

Blockquote adds a left border, padding, and italic styling.

Unordered list item
Another list item

Ordered list item
Second step

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {
  H1,
  H2,
  H3,
  H4,
  P,
  Lead,
  Strong,
  Small,
  Muted,
  Code,
  Link,
  Blockquote,
  List,
  OrderedList,
} from '@e-infra/design-system'

<H1>Main Heading</H1>
<P>Standard body text</P>
<Blockquote>Quoted content</Blockquote>

Exported Components

Component	Element	Classes
`H1`	`h1`	`text-4xl font-bold tracking-tight`
`H2`	`h2`	`text-3xl font-semibold`
`H3`	`h3`	`text-2xl font-semibold`
`H4`	`h4`	`text-xl font-semibold`
`P`	`p`	`text-base leading-7`
`Lead`	`p`	`text-lg leading-8`
`Strong`	`p`	`text-base font-semibold leading-7`
`Small`	`p`	`text-sm leading-6`
`Muted`	`p`	`text-xs leading-5 text-text`
`Code`	`code`	`text-sm font-mono bg-surface px-2 py-1 rounded`
`Link`	`a`	`text-primary underline hover:no-underline`
`Blockquote`	`blockquote`	`border-l-4 border-primary pl-4 italic`
`List`	`ul`	`list-disc list-inside space-y-2`
`OrderedList`	`ol`	`list-decimal list-inside space-y-2`

Text Styles

Headings

tsx

1
2
3
4
<H1>Main Heading</H1>
<H2>Section Heading</H2>
<H3>Sub-heading</H3>
<H4>Sub-section</H4>

Body Text

tsx

1
2
3
4
5
<P>Standard paragraph text for body content.</P>
<Lead>Larger introductory paragraph with muted foreground.</Lead>
<Strong>Emphasized paragraph with semibold weight.</Strong>
<Small>Secondary supporting copy.</Small>
<Muted>Auxiliary metadata or helper text.</Muted>

Inline Elements

tsx

1
2
<Code>const greeting = "Hello World";</Code>
<Link href="#">Standard link</Link>

Structured Content

tsx

1
2
3
4
5
6
7
8
9
10
11
<Blockquote>Quoted content with a left border.</Blockquote>

<List>
  <li>First item</li>
  <li>Second item</li>
</List>

<OrderedList>
  <li>First step</li>
  <li>Second step</li>
</OrderedList>

Props

Component	Props
`H1`, `H2`, `H3`, `H4`	`React.HTMLAttributes<HTMLHeadingElement>`
`P`, `Lead`, `Strong`, `Small`, `Muted`	`React.HTMLAttributes<HTMLParagraphElement>`
`Code`	`React.HTMLAttributes<HTMLElement>`
`Link`	`React.AnchorHTMLAttributes<HTMLAnchorElement>`
`Blockquote`	`React.HTMLAttributes<HTMLQuoteElement>`
`List`	`React.HTMLAttributes<HTMLUListElement>`
`OrderedList`	`React.HTMLAttributes<HTMLOListElement>`

View in Storybook