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.
If you want to use the typography component as an anchor for the dap-ds-toc component, you can use the anchor attribute.
Native heading html elements works as anchor by default.
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.
Thoe bodyAs attribute only applies to the variant="body" typography.
Description text is used to provide additional information about a component or a section.
Example: Custom H1 component with H4 style:
import { DapDSTypography } from 'dap-design-system'
import { DapDSTypographyReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSTypography } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'h1', 'h2' , 'h3' , 'h4' , 'h5' , 'h6' , 'body' , 'caption' , 'description' | The variant of the typography. | |
size | 'sm', 'md' , 'lg' | The size of the typography. | |
bodyAs | string, undefined | The html element of the body typography. | |
customClass | string, undefined | The custom class of the typography. | |
anchor | boolean | false | Whether the typography is an anchor for the TOC component. |
| Name | Description |
|---|---|
default | The content of the typography. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main typography container. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-typography::part(base) {
/* Your custom styles */
}
Example usage:
<dap-ds-typography class="my-custom-dap-ds-typography">
Typography
</dap-ds-typography>
.my-custom-dap-ds-typography::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-text-color | The color of the typography. |
--dds-text-heading-color | The color of the heading typography. |
--dds-text-description-subtle | The color of the subtle typography. |
--dds-text-font-family | The font family of the typography. |
--dds-text-font-weight-medium | The font weight of the medium typography. |
--dds-text-font-weight-bold | The font weight of the bold typography. |
--dds-text-font-size-h1 | The font size of the h1 typography. |
--dds-text-font-size-h2 | The font size of the h2 typography. |
--dds-text-font-size-h3 | The font size of the h3 typography. |
--dds-text-font-size-h4 | The font size of the h4 typography. |
--dds-text-font-size-h5 | The font size of the h5 typography. |
--dds-text-font-size-h6 | The font size of the h6 typography. |
--dds-text-font-size-body | The font size of the body typography. |
--dds-text-font-size-caption | The font size of the caption typography. |
--dds-text-font-size-description | The font size of the description typography. |
--dds-text-font-size-description-lg | The font size of the description lg typography. |
--dds-text-font-size-description-sm | The font size of the description sm typography. |
--dds-text-font-size-lg | The font size of the lg typography. |
--dds-text-font-size-md | The font size of the md typography. |
--dds-text-font-size-sm | The font size of the sm typography. |
--dds-text-font-size-xs | The font size of the xs typography. |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-typography
style="--dds-text-color: value; --dds-text-heading-color: value;">
Typography
</dap-ds-typography>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-typography {
--dds-text-color: value;
--dds-text-heading-color: value;
--dds-text-description-subtle: value;
}
<dap-ds-typography class="my-custom-dap-ds-typography">
Typography
</dap-ds-typography>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-typography {
--dds-text-color: value;
--dds-text-heading-color: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
