Typograhy
Hydrogen provides various text utility classes for typography.
Headings
You can use semantic heading tag in your HTML and our styles will be applied.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
You can use also use heading classes to apply the same styles
where the semantic elements can't be used. Heading classes
.h1 to .h6 can be used.
Class heading 1
Class heading 2
Class heading 3
Class Heading 4
Class heading 5
Class heading 6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class="h1">Class heading 1</p>
<p class="h2">Class heading 2</p>
<p class="h3">Class heading 3</p>
<p class="h4">Class Heading 4</p>
<p class="h5">Class heading 5</p>
<p class="h6">Class heading 6</p>
Text Utility Classes
Hydrogen provided multiple utility classes for text sizes, font weights, text decoration and color.
Text Sizes
You can use .txt-lg class for large size text,
.txt-md class for medium size text,
.txt-rg class for regular size text, and
.txt-sm class for small size text.
Large Text
Medium Text
Regular Text
Small Text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class="txt-lg">Large Text</p>
<p class="txt-md">Medium Text</p>
<p class="txt-rg">Regular Text</p>
<p class="txt-sm">Small Text</p>
Text Weights
Font weights varied from 300 to 900. Hydrogen has
.txt-light class for font weight 300,
.txt-regular for 400,
.txt-semibold for 600, .txt-bold for
700, and .txt-black for font weight 900.
Light Text
Regular Text
Semibold Text
Bold Text
Black Text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class="txt-light">Light Text</p>
<p class="txt-regular">Regular Text</p>
<p class="txt-semibold">Semibold Text</p>
<p class="txt-bold">Bold Text</p>
<p class="txt-black">Black Text</p>
Text decoration and alignment
To make your text gray/ secondary use
.txt-secondary class. You can make your text
white using .txt-white class.
.txt-strike-through applies line-through your
text.
You can center your text using .txt-center class
and align to right using .txt-right class.
Gray Text
Strike through text
Centered text
Text aligned right.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class="txt-secondary">Gray Text</p>
<p class="txt-strike-through">Strike through text</p>
<p class="txt-center">Centered text</p>
<p class="txt-right">Text aligned right.</p>