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>
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>
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>