Typography

• Class Name

  Preview

• text-page-heading-xl

  Copied

  page heading XL

  Moonlight washed the old city, where doors breathed history, clocks forgot time, and a lone traveler felt destiny stir while silence listened, patient and alive beneath broken arches as stars watched dreams wake slowly at dawn.

• text-page-heading-lg

  Copied

  page heading Large

  Moonlight washed the old city, where doors breathed history, clocks forgot time, and a lone traveler felt destiny stir while silence listened, patient and alive beneath broken arches as stars watched dreams wake slowly at dawn.

• text-page-heading-md

  Copied

  page heading Medium

  Moonlight washed the old city, where doors breathed history, clocks forgot time, and a lone traveler felt destiny stir while silence listened, patient and alive beneath broken arches as stars watched dreams wake slowly at dawn.

• text-page-heading-sm

  Copied

  page heading Small

  Moonlight washed the old city, where doors breathed history, clocks forgot time, and a lone traveler felt destiny stir while silence listened, patient and alive beneath broken arches as stars watched dreams wake slowly at dawn.

• text-component-heading-lg

  Copied

  component heading Large

  Moonlight washed the old city, where doors breathed history, clocks forgot time, and a lone traveler felt destiny stir while silence listened, patient and alive beneath broken arches as stars watched dreams wake slowly at dawn.

• text-component-heading-md

  Copied

  component heading Medium

  Moonlight washed the old city, where doors breathed history, clocks forgot time, and a lone traveler felt destiny stir while silence listened, patient and alive beneath broken arches as stars watched dreams wake slowly at dawn.

• text-component-heading-sm

  Copied

  component heading Small

  Moonlight washed the old city, where doors breathed history, clocks forgot time, and a lone traveler felt destiny stir while silence listened, patient and alive beneath broken arches as stars watched dreams wake slowly at dawn.

• text-body-xl

  Copied

  body XL

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-body-lg

  Copied

  body Large

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-body-md

  Copied

  body Medium

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-body-md-loose

  Copied

  body Medium loose

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-body-sm

  Copied

  body Small

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-body-sm-loose

  Copied

  body Small loose

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-body-xs

  Copied

  body XS

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-body-xs-loose

  Copied

  body XS loose

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-label-lg

  Copied

  label Large

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-label-md

  Copied

  label Medium

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-label-sm

  Copied

  label Small

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-detail-md

  Copied

  detail Medium

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-detail-sm

  Copied

  detail Small

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-quote-lg

  Copied

  quote Large

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-quote-md

  Copied

  quote Medium

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-quote-sm

  Copied

  quote Small

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-code-lg

  Copied

  code Large

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-code-md

  Copied

  code Medium

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-code-sm

  Copied

  code Small

  This example paragraph shows italic text for subtle emphasis, bold text for strong emphasis, an inline link for hyperlinks, and an inline control for annotated content such as abbreviations and tooltips.

• text-inline-link

  Copied

  inline link

  This example shows an inline link, used for hyperlinks that appear within the flow of text or other inline content

• text-inline-control

  Copied

  inline control

  This example shows an inline control, used for annotational widgets such as abbreviations and tooltips that appear within the flow of text or other inline content.

• text-inline-code

  Copied

  inline code

  This example shows inline code, used for short fragments of code that appear within the flow of text or other inline content.