Typography

Styles

MUI has several helper classes to implement different text styles:

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
<div class="mui--text-display4">Display4</div>
<div class="mui--text-display3">Display3</div>
<div class="mui--text-display2">Display2</div>
<div class="mui--text-display1">Display1</div>
<div class="mui--text-headline">Headline</div>
<div class="mui--text-title">Title</div>
<div class="mui--text-subhead">Subhead</div>
<div class="mui--text-body2">Body2</div>
<div class="mui--text-body1">Body1</div>
<div class="mui--text-caption">Caption</div>
<div class="mui--text-menu">Menu</div>
<div class="mui--text-button">Button</div>
View in new tab »

Colors

You can use the CSS color helpers to change the color:

dark
dark-secondary
dark-hint

light
light-secondary
light-hint

accent
accent-secondary
accent-hint

black
white
danger
<div class="mui--text-dark">dark</div>
<div class="mui--text-dark-secondary">dark-secondary</div>
<div class="mui--text-dark-hint">dark-hint</div>
<br>
<div style="background-color:#444;">
  <div class="mui--text-light">light</div>
  <div class="mui--text-light-secondary">light-secondary</div>
  <div class="mui--text-light-hint">light-hint</div>
</div>
<br>
<div class="mui--text-accent">accent</div>
<div class="mui--text-accent-secondary">accent-secondary</div>
<div class="mui--text-accent-hint">accent-hint</div>
<br>
<div class="mui--text-black">black</div>
<div class="mui--text-white" style="background-color: #444;">white</div>
<div class="mui--text-danger">danger</div>
View in new tab »

Material Design Spec

You can combine style and color helpers to implement the Material Design typograpy spec:

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
<div class="mui--text-dark-secondary mui--text-display4">Display4</div>
<div class="mui--text-dark-secondary mui--text-display3">Display3</div>
<div class="mui--text-dark-secondary mui--text-display2">Display2</div>
<div class="mui--text-dark-secondary mui--text-display1">Display1</div>
<div class="mui--text-dark mui--text-headline">Headline</div>
<div class="mui--text-dark mui--text-title">Title</div>
<div class="mui--text-dark mui--text-subhead">Subhead</div>
<div class="mui--text-dark mui--text-body2">Body2</div>
<div class="mui--text-dark mui--text-body1">Body1</div>
<div class="mui--text-dark-secondary mui--text-caption">Caption</div>
<div class="mui--text-dark mui--text-menu">Menu</div>
<div class="mui--text-dark mui--text-button">Button</div>

<div style="background-color:#444;">
  <div class="mui--text-light-secondary mui--text-display4">Display4</div>
  <div class="mui--text-light-secondary mui--text-display3">Display3</div>
  <div class="mui--text-light-secondary mui--text-display2">Display2</div>
  <div class="mui--text-light-secondary mui--text-display1">Display1</div>
  <div class="mui--text-light mui--text-headline">Headline</div>
  <div class="mui--text-light mui--text-title">Title</div>
  <div class="mui--text-light mui--text-subhead">Subhead</div>
  <div class="mui--text-light mui--text-body2">Body2</div>
  <div class="mui--text-light mui--text-body1">Body1</div>
  <div class="mui--text-light-secondary mui--text-caption">Caption</div>
  <div class="mui--text-light mui--text-menu">Menu</div>
  <div class="mui--text-light mui--text-button">Button</div>
</div>

<div class="mui--text-accent-secondary mui--text-display4">Display4</div>
<div class="mui--text-accent-secondary mui--text-display3">Display3</div>
<div class="mui--text-accent-secondary mui--text-display2">Display2</div>
<div class="mui--text-accent-secondary mui--text-display1">Display1</div>
<div class="mui--text-accent mui--text-headline">Headline</div>
<div class="mui--text-accent mui--text-title">Title</div>
<div class="mui--text-accent mui--text-subhead">Subhead</div>
<div class="mui--text-accent mui--text-body2">Body2</div>
<div class="mui--text-accent mui--text-body1">Body1</div>
<div class="mui--text-accent-secondary mui--text-caption">Caption</div>
<div class="mui--text-accent mui--text-menu">Menu</div>
<div class="mui--text-accent mui--text-button">Button</div>
View in new tab »
« Previous Next »