Text-Utility

Documentation and examples for one8Ui typography, including global settings, headings, body text, lists, and more.

Headings

All HTML headings, <h1> through <h6>, are available.

h1. one8 Heading

h2. one8 Heading

h3. one8 Heading

h4. one8 Heading

h5. one8 Heading

h6. one8 Heading

Copy
 
  <section>
    <h1 class="heading">h1. one8 Heading</h1>
    <h2 class="heading">h2. one8 Heading</h2>
    <h3 class="heading">h3. one8 Heading</h3>
    <h4 class="heading">h4. one8 Heading</h4>
    <h5 class="heading">h5. one8 Heading</h5>
    <h6 class="heading">h6. one8 Heading</h6>
  </section>
  

Center Text

The texts are aligned left, center and right with respect to its parent container.

Left Align

Center Align

Right Align

Copy
  
  <section class="alignment">
    <p class="left-align">Left Align</p>
    <p class="center-align">Center Align</p>
    <p class="right-align">Right Align</p>
  </section>
  

Grey Text

The texts are grey in color.

small grey text

grey text

grey text

grey text

Copy
  
    <section>
      <small class="grey-color">small grey text</small>
      <p class="grey-color">grey text</p>
      <p class="grey-color"><strong>grey text</strong></p>
      <h3 class="heading grey-color">grey text</h3>
   </section>
   

Font Sizes

The texts are of different font-sizes.

font-size 6

font-size 5

font-size 4

font-size 3

font-size 2

font-size 1

Copy
  
  <section>
    <p class="fs-6">font-size 6</p>
    <p class="fs-5">font-size 5</p>
    <p class="fs-4">font-size 4</p>
    <p class="fs-3">font-size 3</p>
    <p class="fs-2">font-size 2</p>
    <p class="fs-1">font-size 1</p>
  </section>
  