| Vapor CSS

Headings

All HTML headings, `h1` through `h6`, are available.

Style sheet: /scss/typography/headings.scss

Admin heading 1

Admin heading 2

Admin heading 3

Admin heading 4

Admin heading 5
Admin heading 6
<h1>Admin heading 1</h1>
<h2>Admin heading 2</h2>
<h3>Admin heading 3</h3>
<h4>Admin heading 4</h4>
<h5>Admin heading 5</h5>
<h6>Admin heading 6</h6>

Colors

Use this suite of color utilities for text colors.

Style sheet: /scss/common/palette.scss

.text-dark-blue .text-medium-blue .text-light-blue .text-dark-grey .text-darker-grey .text-medium-grey .text-light-gray .text-white .text-pure-white .text-orange

<h3>
    <span class="text-dark-blue">
        .text-dark-blue
    </span>

    <span class="text-medium-blue">
        .text-medium-blue
    </span>

    <span class="text-light-blue">
        .text-light-blue
    </span>

    <span class="text-dark-grey">
        .text-dark-grey
    </span>

    <span class="text-darker-grey">
        .text-darker-grey
    </span>

    <span class="text-medium-grey">
        .text-medium-grey
    </span>

    <span class="text-light-grey bg-dark-grey">
        .text-light-gray
    </span>

    <span class="text-white bg-dark-grey">
        .text-white
    </span>

    <span class="text-pure-white bg-dark-grey">
        .text-pure-white
    </span>

    <span class="text-orange">
        .text-orange
    </span>
</h3>

Utilities

Change typographic weights, styles, and alignment with these utility classes.

Style sheet: /scss/typography/utility.scss

Text in bold
Text in semibold
Text in regular
Text in italic
Text with underline
Text in caps
Text with left-align
Text in center
Text with right-align
Text in justify
Text with nowrap
Text with break-word
Text with truncate is cut
Text that has 80% of its parent size

<h3>
    <div class="bold">
        Text in bold
    </div>

    <div class="semibold">
        Text in semibold
    </div>

    <div class="regular">
        Text in regular
    </div>

    <div class="italic">
        Text in italic
    </div>

    <div class="underline">
        Text with underline
    </div>

    <div class="caps">
        Text in caps
    </div>

    <div class="left-align">
        Text with left-align
    </div>

    <div class="center">
        Text in center
    </div>

    <div class="right-align">
        Text with right-align
    </div>

    <div class="justify">
        Text in justify
    </div>

    <div class="nowrap">
        Text with
        nowrap
    </div>

    <div class="break-word" style="width: 145px;">
        Text with break-word
    </div>

    <div class="truncate"  style="width: 145px;">
        Text with truncate is cut
    </div>

    <div class="smaller">
        Text that has 80% of its parent size
    </div>
</h3>

Lists

Apply styles to unordered and ordered lists

Style sheet: /scss/typography/lists.scss

  • list reset item 1
  • item 2
  • item 3
  • Disc list item 1
  • item 2
  • item 3
  • Circles list item 1
  • item 2
  • item 3
  • Squares list item 1
  • item 2
  • item 3
  1. Decimal list item 1
  2. Item 2
  3. Item 3
  1. Lower alpha list item 1
  2. Item 2
  3. Item 3
  1. Upper alpha list item 1
  2. Item 2
  3. Item 3

<h3>
    <ul class="list-reset">
        <li>list reset item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    
    <ul class="list-disc">
        <li>Disc list item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    
    <ul class="list-circle">
        <li>Circles list item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    
    <ul class="list-square">
        <li>Squares list item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    
    <ol class="list-decimal">
        <li>Decimal list item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    
    <ol class="list-lower-alpha">
        <li>Lower alpha list item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    
    <ol class="list-upper-alpha">
        <li>Upper alpha list item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</h3>

Line-height

Change line-height for headings and paragraph.

Style sheet: /scss/typography/line-height.scss

H1 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula.

H2 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula.

H3 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula.

H4 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula.

H5 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula.

H6 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula.

P gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula.
<div class= "h1" style="width: 700px;">
    H1 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula. 
</div>
<br>
<div class= "h2" style="width: 550px;">
    H2 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula. 
</div>
<br>
<div class= "h3" style="width: 425px;">
    H3 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula. 
</div>
<br>
<div class= "h4" style="width: 375px;">
    H4 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula. 
</div>
<br>
<div class= "h5" style="width: 375px;">
    H5 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula. 
</div>
<br>
<div class= "h6" style="width: 375px;">
    H6 gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula. 
</div>
<br>
<div class= "p" style="width: 375px;">
    P gggggg Lorem ipsum dolor sit amet, consectetur adipiscing ÉÉÉÉÉ elit. Pellentesque sit amet tincidunt ligula. 
</div>