Typography

Font styles and modifiers for the typography on the Klaseko platform

Headings

The h1 through h6 tags are available for when you want to match the font styling of a heading but cannot use the associated Klasify element.


  <h1>h1 I think I'm getting smaller by the second</h1>

  <h2>h2 I think I'm getting smaller by the second</h2>

  <h3>h3 I think I'm getting smaller by the second</h3>

  <h4>h4 I think I'm getting smaller by the second</h4>

  <h5>h5 I think I'm getting smaller by the second</h5>

  <h6>h6 I think I'm getting smaller by the second</h6>

h1 I think I'm getting smaller by the second

h2 I think I'm getting smaller by the second

h3 I think I'm getting smaller by the second

h4 I think I'm getting smaller by the second

h5 I think I'm getting smaller by the second

h6 I think I'm getting smaller by the second

Font helpers and classes

Classes that give you more power over your font and typography

Lead

Make a paragraph stand out by adding .lead class


    <p class="lead">Please fill up the necessary fields.</p>

Please fill up the necessary fields.

Text Alignment

Let's you align your text the way you want


    <p class="text-left">Sadron's Protracted Frisson!</p>

    <p class="text-center">Myrault's Hinder-Gast!</p>

    <p class="text-right">Killing Wall of Koryx!</p>

Sadron's Protracted Frisson!

Myrault's Hinder-Gast!

Killing Wall of Koryx!

Text Transform

Transform text in components with text capitalization classes.


    <p class="text-lowercase">Shimare's Extractive Pulse!</p>

    <p class="text-uppercase">claws of tornarus!</p>

    <p class="text-capitalize">zeal of wexort!</p>

Shimare's Extractive Pulse!

claws of tornarus!

zeal of wexort!

Font weight

Quickly change the weight (boldness) text.


    <p class="font-thin">Harlek's Incantation of Incineration!</p>

    <p class="font-light">Harlek's Incantation of Incineration!</p>

    <p class="font-medium">Harlek's Incantation of Incineration!</p>

    <p class="font-bold">Harlek's Incantation of Incineration!</p>

    <p class="text-small">Harlek's Incantation of Incineration!</p>

Harlek's Incantation of Incineration!