Typography component is used to create a consistent hierarchy, readability, and visual language across the design system. The system uses a set of tokens for font size, line height, and font weight.
Typography component has predefined variants for different use cases. You can use the variant attribute to set the typography variant.
The typography component provides a set of heading styles from h1 to h6. The h1 is the largest and h6 is the smallest.
<dap-ds-stack> <dap-ds-typography variant="h1">Heading 1</dap-ds-typography> <dap-ds-typography variant="h2">Heading 2</dap-ds-typography> <dap-ds-typography variant="h3">Heading 3</dap-ds-typography> <dap-ds-typography variant="h4">Heading 4</dap-ds-typography> <dap-ds-typography variant="h5">Heading 5</dap-ds-typography> <dap-ds-typography variant="h6">Heading 6</dap-ds-typography> </dap-ds-stack>
If you want to use the typography component as an anchor for the dap-ds-toc component, you can use the anchor attribute.
<dap-ds-typography variant="h3" anchor> Anchor text </dap-ds-typography>
The typography component provides a body variant for body text. The body variant is rendered as a paragraph by default, but you can use the bodyAs attribute to render it as a different HTML element.
<dap-ds-typography variant="body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec nunc ultricies ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec nunc ultricies ultricies. </dap-ds-typography>
<dap-ds-typography variant="body" bodyAs="span"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec nunc ultricies ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec nunc ultricies ultricies. </dap-ds-typography>
<dap-ds-typography variant="caption"> Caption text </dap-ds-typography>
Description text is used to provide additional information about a component or a section.
<dap-ds-typography variant="description"> Description text </dap-ds-typography>
import { DapDSTypography } from 'dap-design-system/dist/dds'
import { DapDSTypographyReact } from 'dap-design-system/dist/react'
| Name | Description |
|---|---|
default | The content of the typography. |
| Property | Type | Default | Description |
|---|---|---|---|
variant | TypographyVariant | The variant of the typography. Can be h1, h2, h3, h4, h5, h6, body, caption, or description. | |
size | TypographySize | The size of the typography. Can be sm, md, or lg. | |
bodyAs | string | 'p' | The element of the body typography. Default is p. |
elementId | string | The id of the typography. | |
customClass | string | The custom class of the typography. | |
anchor | boolean | false | Whether the typography is an anchor for the TOC component. |
No custom events available.
No CSS parts available.