Typographic elements and classes
We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.
Heading h1, or .h1 class
Heading h2, or .h2 class
Heading h3, or .h3 class
Heading h4, or .h4 class
Heading h5, or .h5 class
Heading h6, or .h6 class
.subtitle1 class
.subtitle2 class
.body1 class. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
.body2 class. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
Changing the semantic element
It's important to understand that the styling of a typography element is
independent from the semantic meaning of the element.
The styling can be overridden with a class="headinglevel":
<h1 class="h4">Hello World</h1>