Heading

Ready Added in 2.0.0

Define different styles for headings.

Size modifiers

Add one of the following classes to modify the size and style of headings. Usually, these classes would be used on heading elements, but they work also with any other element like a div element. Note that these classes extend the heading classes from the Base component upward, and the smallest modifier picks up the size after h1 element.

Class Description
.gls-heading-small Add this class to apply a small-sized heading.
.gls-heading-medium Add this class to apply a medium-sized heading.
.gls-heading-large Add this class to apply a large-sized heading.
.gls-heading-xlarge Add this class to apply a xlarge-sized heading.
.gls-heading-2xlarge Add this class to apply a 2xlarge-sized heading.
<h1 class="gls-heading-medium"></h1>
  • Small

    Medium

    Large

    X-Large

    2X-Large

  • <h1 class="gls-heading-small">Small</h1>
    <h1 class="gls-heading-medium">Medium</h1>
    <h1 class="gls-heading-large">Large</h1>
    <h1 class="gls-heading-xlarge">X-Large</h1>
    <h1 class="gls-heading-2xlarge">2X-Large</h1>
    

Divider modifier

To apply a divider to a heading, add the .gls-heading-divider class. You can combine it with any size modifier.

<h1 class="gls-heading-divider"></h1>
  • Heading Divider

  • <h1 class="gls-heading-divider">Heading Divider</h1>
    

Bullet modifier

To apply a bullet to a heading, add the .gls-heading-bullet class. You can combine it with any size modifier, and it works well with text alignment.

<h1 class="gls-heading-bullet"></h1>
  • Heading Bullet

  • <h1 class="gls-heading-bullet">Heading Bullet</h1>
    

Line modifier

To apply a vertically centered line to a heading, add the .gls-heading-line class and place a <span> element inside the heading element. You can combine it with any size modifier, and it works well with text alignment.

<h1 class="gls-heading-line"><span></span></h1>
  • Heading Line

    Heading Line

    Heading Line

  • <h1 class="gls-heading-line"><span>Heading Line</span></h1>
    
    <h1 class="gls-heading-line gls-text-center"><span>Heading Line</span></h1>
    
    <h1 class="gls-heading-line gls-text-right"><span>Heading Line</span></h1>