@ds-kit/typography
v5.1.1
Published
Typography components
Downloads
36
Readme
title: "Typography" slug: "/packages/typography" category: "general" componentNames:
- "Span"
- "P"
- "Heading"
Typography
The ds-kit typography module contains components to help style text and create pleasant reading experiences for users. The components provide solid styles out of the box, but also offer enough flexibility to fill most styling needs.
Read more about how to use typography and the type scales in the design guidelines for typography.
import { Heading, P, Span } from "@ds-kit/typography"
Basic Example
Out of the box, typography components default to useful dimensions. You can easily modify any of these components to fit your needs.
<>
<Heading>Heading h1</Heading>
<P>This is a sample paragraph.</P>
</>
Headings
You can use any valid html heading tag with the as
prop (h1
,h2
,h3
,h4
,h5
,h6
). Note that the tag you pass in there will have no impact on the actual size of the heading. The as
prop serves only the purpose of enforcing a good semantic html structure on the page. To set the actual size of the heading, use the size
prop.
<>
<Heading as="h1">Heading h1</Heading>
<Heading as="h2">Heading h2</Heading>
<Heading as="h3">Heading h3</Heading>
<Heading as="h4">Heading h4</Heading>
<Heading as="h5">Heading h5</Heading>
<Heading as="h6">Heading h6</Heading>
</>
Sizes
When setting the size of the heading, you can use the size
prop. This prop takes any value between xxs
and xxxl
. It will not respond to rem
or px
sizes.
<>
<Heading size="xxs">Heading XXS</Heading>
<Heading size="xs">Heading XS</Heading>
<Heading size="sm">Heading SM</Heading>
<Heading size="md">Heading MD</Heading>
<Heading size="lg">Heading LG</Heading>
<Heading size="xl">Heading XL</Heading>
<Heading size="xxl">Heading XXL</Heading>
<Heading size="xxxl">Heading XXXL</Heading>
</>