Typography

Headings

HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are h1, h2, h3, h4, h5, and h6 with h1 being the highest (or most important) level and h6 the least. You can also utilize the heading classes .h1 through .h6 on other elements if you want to apply the font-size of a heading on another element's text.

Heading 1 <h1>Heading 2 <h2>Heading 3 <h3>Heading 4 <h4>Heading 5 <h5>Heading 6 <h6>

Example HTML:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<span class="h1">Heading 1</span>
<p class="h3">Heading 3</p>

Heading Red Underline

Headings can have an optional underline. To apply an underline to any heading simply add the correct utility class.

Code Example:

<h2 class="dk-h--underline">Heading With Underline</h2>

Code Preview:

Utility Elements and Classes

To style text you can make use of different HTML elements and class names. The following are typography utility classes and HTML elements that should be used to style text.

  • italic text use: <em>, <i> or the CLASS .dk-italic
  • bold text use: <strong>, <b> or the CLASS dk-bold
  • uppercase text use: CLASS `dk-uppercase`
  • small text use: CLASS `dk-text--sm`
  • large text use: CLASS `dk-text--lg`
  • overline text use: CLASS `dk-overline`
  • link text use: CLASS `dk-link`

Body Text

Code Example:

<p>
  This is <strong>Regular Body Copy.</strong> 
  Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum. Ac tortor dignissim convallis aenean et
  tortor at risus. Lorem ipsum dolor sit amet consectetur adipiscing. Porttitor lacus luctus
  accumsan tortor posuere ac ut. Curabitur gravida arcu ac tortor dignissim convallis aenean et.
  Gravida neque convallis a cras.
</p>

<p class="dk-text--lg">
  This is <strong>Large Body Copy</strong>. 
  The dk-text--large classname increases the font size and line height.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore tur.
</p>

Code Preview:

Marketing (Larger) Font Size

To enable larger font sizes on marketing pages add the classname dk-font-size--marketing. By adding this class to a parent container it sets the default font sizes to the larger sizes.

Code Example:

<div class="dk-font-size--marketing">
  <p>
  Standard paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore tur.
  </p>
  <p class="dk-text--lg">
  Large paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore tur.
  </p>
</div>

Code Preview:

Marketplace Product

To style the Marketplace Product indicator you can you apply the dk-text-marketplace class.

Code Example:

  <span className="dk-text-marketplace">Marketplace Product</span>

Code Preview: