Skip to main content
react-md
react-md - Typography - Demos

Typography Examples

There are 13 different typography styles provided by react-md and the material design specifications. You can use the Typography component exported from this package to apply a specific style or use the rmd-typography mixin within SCSS files.

If you want to change the typography styles, check out the $rmd-typography-styles documentation.

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6
Subtitle 1
Subtitle 2

Body 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan auctor neque, eu dignissim ex. Etiam vitae nisl ex. Maecenas ut elit risus. In consequat augue quis dui ultrices, nec interdum ipsum lacinia. Sed cursus justo erat, vehicula vestibulum lacus mattis ut. Fusce id lacinia sem, nec volutpat nunc. Suspendisse nec sem libero. Pellentesque diam eros, ornare ut nunc vitae, finibus feugiat purus. Mauris finibus aliquam consequat.

Body 2: Cras condimentum facilisis augue vel porta. Proin eget aliquam libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec elementum imperdiet erat, sed feugiat turpis sodales a. Aenean congue luctus venenatis. Phasellus congue nulla justo, nec facilisis mi porttitor eu. Mauris semper ex et ex scelerisque placerat. Cras id urna vulputate, euismod dolor a, laoreet odio. Etiam accumsan vehicula nulla, quis luctus ante iaculis id. Quisque hendrerit, odio sit amet rutrum vestibulum, metus purus ultrices risus, ac vulputate mi ante id purus. Cras in felis ut lorem aliquam dapibus ut id lacus. Ut maximus tortor libero, sit amet mollis ipsum euismod id. Morbi vulputate ac sapien nec bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras ipsum massa, tristique tincidunt finibus vitae, aliquam vitae est.

Caption text
Overline text
Button text

Text Container Examples

The TextContainer is a simple component that can be used to center and apply a max-width to children content (normally text). The line width can be configured with the $rmd-typography-mobile-max-line-length, $rmd-typography-desktop-max-line-width, $rmd-typography-text-container-breakpoint SCSS variables.

This example requires a more screen real estate than what is available so you will need to open it in a full page dialog.