Typography

Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

Normal Headings

To show this type of Typography you will need this code in down here.

     
<h1 className="font-weight-light">Heading 1
    <small> Sub-heading</small>
</h1>
<h2 className="font-weight-light">Heading 2
    <small> Sub-heading</small>
</h2>
<h3 className="font-weight-light">Heading 3
    <small> Sub-heading</small>
</h3>
<h4 className="font-weight-light">Heading 4
    <small> Sub-heading</small>
</h4>
<h5 className="font-weight-light">Heading 5
    <small> Sub-heading</small>
</h5>
<h6 className="font-weight-light">Heading 6
    <small> Sub-heading</small>
</h6>
 

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
align	enum: 'inherit', 'left', 'center', 'right', 'justify'	'inherit'	Set the text-align on the component.
children	node		The content of the component.
classes	object		Useful to extend the style applied to components.
color	enum: 'inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default'	'default'	The color of the component. It supports those theme colors that make sense for this component.
component	union: string |  func		The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component.
gutterBottom	bool	false	If true, the text will have a bottom margin.
headlineMapping	object	{ display4: 'h1', display3: 'h1', display2: 'h1', display1: 'h1', headline: 'h1', title: 'h2', subheading: 'h3', body2: 'aside', body1: 'p',}	We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the component property.
noWrap	bool	false	If true, the text will not wrap, but instead will truncate with an ellipsis.
paragraph	bool	false	If true, the text will have a bottom margin.
variant	enum: 'display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'	'body1'	Applies the theme typography styles.