Text

The text component, prefixed with gds-text, is used for displaying text. In the Design System, all headings (h1-h6) are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility. The text helper classes help maintain visual hierarchy separately from the structural markup hierarchy.

Demo

XXL Header Text

XL Header Text

LG Header Text

MD Header Text

SM Header Text

XS Header Text

MD Body Text (Default)

SM Body Text

XS Body Text

For 10 years, GumGum has perfected its content analysis capabilities, using the latest in deep learning technology.

Cats
Dogs

Cats
Dogs

<div className="-p-a-3">
  <h1 className="gds-text--header-xxl -m-b-3"> XXL Header Text</h1>
  <h2 className="gds-text--header-xl -m-b-3"> XL Header Text</h2>
  <h3 className="gds-text--header-lg -m-b-3"> LG Header Text</h3>
  <h4 className="gds-text--header-md -m-b-3"> MD Header Text</h4>
  <h5 className="gds-text--header-sm -m-b-3"> SM Header Text</h5>
  <h6 className="gds-text--header-xs -m-b-3"> XS Header Text</h6>
  <br />
  <p className="gds-text--body-md">MD Body Text (Default)</p>
  <p className="gds-text--body-sm">SM Body Text</p>
  <p className="gds-text--body-xs">XS Body Text</p> 
  <br />
  <p className="gds-text--body-md">
  For 10 years, <span className="gds-text--hero">GumGum</span> has <span className="gds-text--italic">perfected</span> its content analysis capabilities, using the latest in <span className="gds-text--info">deep learning technology</span>.
  </p>
  <br />
  <ul>
    <li className="gds-text__list-item--disc">Cats</li>
    <li className="gds-text__list-item--disc">Dogs</li>
  </ul>
  <br />
  <ol>
    <li className="gds-text__list-item--number">Cats</li>
    <li className="gds-text__list-item--number">Dogs</li>
  </ol>
</div>

<div className="-p-a-3">
  <h1 className="gds-text--header-xxl -m-b-3"> XXL Header Text</h1>
  <h2 className="gds-text--header-xl -m-b-3"> XL Header Text</h2>
  <h3 className="gds-text--header-lg -m-b-3"> LG Header Text</h3>
  <h4 className="gds-text--header-md -m-b-3"> MD Header Text</h4>
  <h5 className="gds-text--header-sm -m-b-3"> SM Header Text</h5>
  <h6 className="gds-text--header-xs -m-b-3"> XS Header Text</h6>
  <br />
  <p className="gds-text--body-md">MD Body Text (Default)</p>
  <p className="gds-text--body-sm">SM Body Text</p>
  <p className="gds-text--body-xs">XS Body Text</p> 
  <br />
  <p className="gds-text--body-md">
  For 10 years, <span className="gds-text--hero">GumGum</span> has <span className="gds-text--italic">perfected</span> its content analysis capabilities, using the latest in <span className="gds-text--info">deep learning technology</span>.
  </p>
  <br />
  <ul>
    <li className="gds-text__list-item--disc">Cats</li>
    <li className="gds-text__list-item--disc">Dogs</li>
  </ul>
  <br />
  <ol>
    <li className="gds-text__list-item--number">Cats</li>
    <li className="gds-text__list-item--number">Dogs</li>
  </ol>
</div>

Error Log

Size - Header

gds-text--header-xs

gds-text--header-sm

gds-text--header-md

gds-text--header-lg

gds-text--header-xl

gds-text--header-xxl

Size - Body

gds-text--body-xs

gds-text--body-sm

gds-text--body-md

Weight

gds-text--regular

gds-text--bold

Context (Color)

gds-text--primary

gds-text--secondary

gds-text--success

gds-text--info

gds-text--warning

gds-text--danger

Additional Context (Color) w/ Utilities (* = 1-5)

-color-tx-lt-1

-color-tx-lt-2

-color-tx-lt-3

-color-tx-lt-4

-color-tx-lt-5

-color-tx-dk-1

-color-tx-dk-2

-color-tx-dk-3

-color-tx-dk-4

-color-tx-dk-5

-color-tx-white

-color-tx-pri

-color-tx-pri-lt-*

-color-tx-pri-dk-*

-color-tx-sec

-color-tx-sec-lt-*

-color-tx-sec-dk-*

-color-tx-ter

-color-tx-ter-lt-*

-color-tx-ter-dk-*

-color-tx-suc

-color-tx-suc-lt-*

-color-tx-suc-dk-*

-color-tx-war

-color-tx-war-lt-*

-color-tx-war-dk-*

-color-tx-dan

-color-tx-dan-lt-*

-color-tx-dan-dk-*

-color-tx-inf

-color-tx-inf-lt-*

-color-tx-inf-dk-*

-color-tx-gold

-color-tx-gold-lt-*

-color-tx-gold-dk-*

-color-tx-blue

-color-tx-blue-lt-*

-color-tx-blue-dk-*

-color-tx-red

-color-tx-red-lt-*

-color-tx-red-dk-*

-color-tx-green

-color-tx-green-lt-*

-color-tx-green-dk-*

-color-tx-purple

-color-tx-purple-lt-*

-color-tx-purple-dk-*

-color-tx-orange

-color-tx-orange-lt-*

-color-tx-orange-dk-*

-color-tx-dkblue

-color-tx-dkblue-lt-*

-color-tx-dkblue-dk-*

-color-tx-dkred

-color-tx-dkred-lt-*

-color-tx-dkred-dk-*

-color-tx-dkgreen

-color-tx-dkgreen-lt-*

-color-tx-dkgreen-dk-*

-color-tx-dkgold

-color-tx-dkgold-lt-*

-color-tx-dkgold-dk-*

-color-tx-magenta

-color-tx-magenta-lt-*

-color-tx-magenta-dk-*

Style

gds-text--italic

gds-text--blockquote

gds-text--blockquote--footer

gds-text--highlight

gds-text--code

gds-text--keyboard

List

gds-text__list-item--disc

gds-text__list-item--number