There are 13 different typography styles provided by react-md
and the material
design specifications. You can use the Text
component exported from this
package to apply a specific style or use the rmd-typoraphy
mixin within SCSS
files.
If you want to change the typography styles, check out the $rmd-typography-styles documentation.
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.
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.