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