Typography

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.

Usage

Typography component has predefined variants for different use cases. You can use the variant attribute to set the typography variant.

Headings

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 direction="row" spacing="1200">
<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>
<dap-ds-stack>
<h1 className="dds-heading dds-typography-h1">
  Native Heading 1
</h1>
<h2 className="dds-heading dds-typography-h2">
  Native Heading 2
</h2>
<h3 className="dds-heading dds-typography-h3">
  Native Heading 3
</h3>
<h4 className="dds-heading dds-typography-h4">
  Native Heading 4
</h4>
<h5 className="dds-heading dds-typography-h5">
  Native Heading 5
</h5>
<h6 className="dds-heading dds-typography-h6">
  Native Heading 6
</h6>
</dap-ds-stack>
</dap-ds-stack>
Anchor

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.

<dap-ds-typography variant="h3" anchor>
Anchor text
</dap-ds-typography>
Body

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

Pure CSS body text:
<p className="dds-typography typography-body dds-typography-size--md">
  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.
</p>
</dap-ds-stack>
Body as

Thoe bodyAs attribute only applies to the variant="body" 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>
Caption 
<dap-ds-stack>
<dap-ds-typography variant="caption">
  Caption text
</dap-ds-typography>

Pure CSS caption text:
<span className="dds-typography dds-typography-caption">
  Caption text
</span>
</dap-ds-stack>
Description

Description text is used to provide additional information about a component or a section.

<dap-ds-stack>
<dap-ds-stack spacing="100">
  <dap-ds-typography variant="description">
    Description text
  </dap-ds-typography>
  <dap-ds-typography variant="description" size="sm">
    Description text
  </dap-ds-typography>
</dap-ds-stack>

<dap-ds-stack spacing="100">
  Pure CSS description text:
  <span className="dds-typography dds-typography-description">
    Description text
  </span>
  <span className="dds-typography dds-typography-description dds-typography-size--sm">
    Description text
  </span> 
</dap-ds-stack>
</dap-ds-stack>
Custom styles

Example: Custom H1 component with H4 style:

<>
<dap-ds-typography variant="h1" style={{
  '--dds-text-font-size-h1': 'var(--dds-text-font-size-h4)',
}}>
  Custom H1 component with built in H4 styling variables, overwrite the local custom css property
</dap-ds-typography>
</>
Importing 
import { DapDSTypography } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSTypographyReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
variant'h1', 'h2' , 'h3' , 'h4' , 'h5' , 'h6' , 'body' , 'caption' , 'description'The variant of the typography.
size'sm', 'md' , 'lg'The size of the typography.
bodyAsstring, undefined'p'The html element of the body typography.
customClassstring, undefinedThe custom class of the typography.
anchorbooleanfalseWhether the typography is an anchor for the TOC component.
Slots
NameDescription
defaultThe content of the typography.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main typography container.
CSS Custom Properties
Property NameDescription
--dds-text-colorThe color of the typography.
--dds-text-heading-colorThe color of the heading typography.
--dds-text-description-subtleThe color of the subtle typography.
--dds-text-font-familyThe font family of the typography.
--dds-text-font-weight-mediumThe font weight of the medium typography.
--dds-text-font-weight-boldThe font weight of the bold typography.
--dds-text-font-size-h1The font size of the h1 typography.
--dds-text-font-size-h2The font size of the h2 typography.
--dds-text-font-size-h3The font size of the h3 typography.
--dds-text-font-size-h4The font size of the h4 typography.
--dds-text-font-size-h5The font size of the h5 typography.
--dds-text-font-size-h6The font size of the h6 typography.
--dds-text-font-size-bodyThe font size of the body typography.
--dds-text-font-size-captionThe font size of the caption typography.
--dds-text-font-size-descriptionThe font size of the description typography.
--dds-text-font-size-description-lgThe font size of the description lg typography.
--dds-text-font-size-description-smThe font size of the description sm typography.
--dds-text-font-size-lgThe font size of the lg typography.
--dds-text-font-size-mdThe font size of the md typography.
--dds-text-font-size-smThe font size of the sm typography.
--dds-text-font-size-xsThe font size of the xs typography.