17.1 #Typography.blockquote Blockquote

Block quote text

Example

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee Halvah powder chocolate cake pudding. Candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer.

Markup

 <blockquote>
  <p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee  Halvah powder chocolate cake pudding. Candy fruitcake jelly
    beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer.</p>
 </blockquote>

Source: scss/base/_typography.scss, line 101

17.2 #Typography.font-size Font size variants.

Helper classes to change text font size. Sizes are relative to the parent font size.

Examples

Default styling

I am some text

.duk-text--x-small

Very small text

I am some text

.duk-text--small

Small text

I am some text

.duk-text--regular

Inherits to parent font size

I am some text

.duk-text--large

Large text

I am some text

.duk-text--x-large

Very large text

I am some text

Markup

 <p class="[modifier class]">I am some text</p>

Source: scss/base/_typography.scss, line 75

17.3 #Typography.headings Headings

All headings. Styled with duk-headings().

Example

This is a heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

Markup

  <h1>This is a heading 1</h1>
  <h2>This is a Heading 2</h2>
  <h3>This is a Heading 3</h3>
  <h4>This is a Heading 4</h4>
  <h5>This is a Heading 5</h5>
  <h6>This is a Heading 6</h6>

Source: scss/base/_typography.scss, line 11

17.4 #Typography.reset-list Reset list

Remove margin, padding, list style from a list.

Example

I am an unordered list item
I am an unordered list item
I am an unordered list item

Markup

 <ul class="duk-reset-list">
   <li>I am an unordered list item</li>
   <li>I am an unordered list item</li>
   <li>I am an unordered list item</li>
 </ul>

Source: scss/base/_typography.scss, line 123

17.5 #Typography.text Text

Basic text styles including a, strong, underline, em, hr.

Example

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.

Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy.

Markup

  <p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
  dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
  Macaroon croissant sweet cheesecake. <em>Croissant icing</em> muffin. Gingerbread
  pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear
  claw <u>tootsie roll jujubes</u>.</p>
  <hr />
  <p>Jelly donut dragée sweet <a href="#">roll</a> sesame snaps <strong>tootsie
  roll</strong>. Halvah powder chocolate cake pudding. Candy fruitcake jelly
  beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer.
  <em>Danish cake candy</em>.</p>

Source: scss/base/_typography.scss, line 36

17.6 #Typography.text-align Text alignment

Add duk-text-align-DIRECTION to the text wrapper to align the text. Directions are left, right, center & justify

Examples

Default styling