Colors
Black and white variations
.text-black
.text-black-primary
.text-black-secondary
.text-black-hint
.text-black-divider
<div class="bg-light-4 card card-body">
<p class="text-black">.text-black</p>
<p class="text-black-primary">.text-black-primary</p>
<p class="text-black-secondary">.text-black-secondary</p>
<p class="text-black-hint">.text-black-hint</p>
<p class="text-black-divider">.text-black-divider</p>
</div>.text-white
.text-white-primary
.text-white-secondary
.text-white-hint
.text-white-divider
<div class="bg-dark-1 card card-body">
<p class="text-white">.text-white</p>
<p class="text-white-primary">.text-white-primary</p>
<p class="text-white-secondary">.text-white-secondary</p>
<p class="text-white-hint">.text-white-hint</p>
<p class="text-white-divider">.text-white-divider</p>
</div>Theme colors
.text-primary
.text-secondary
.text-danger
.text-info
.text-success
.text-warning
.text-dark
.text-light
<div class="bg-light-4 card card-body">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-danger">.text-danger</p>
<p class="text-info">.text-info</p>
<p class="text-success">.text-success</p>
<p class="text-warning">.text-warning</p>
<p class="text-dark">.text-dark</p>
<p class="bg-dark-1 text-light">.text-light</p>
</div>Styles
Roboto is the standard typeface. Please make sure to load Roboto by including a single line of HTML:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&family=Roboto+Slab:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">By default, Material utilises 4 weights, 300 (light), 400 (regular), 500 (medium) and 700 (bold), of Roboto, but you may need to include fewer or more weights based on your specific usage. In addition, 300i, 400i, 500i and 700i are also included in the above code, but can be safely removed in some cases to speed up page load time.
The basic set of styles are based on a typographic scale of 12, 14, 16, 20, and 34 px.
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
Subtitle 1
Subtitle 2
Body 1. 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.
Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.
Caption text
OVERLINE TEXT
<p class="typography-headline-1">Headline 1</p>
<p class="typography-headline-2">Headline 2</p>
<p class="typography-headline-3">Headline 3</p>
<p class="typography-headline-4">Headline 4</p>
<p class="typography-headline-5">Headline 5</p>
<p class="typography-headline-6">Headline 6</p>
<p class="typography-subtitle-1">Subtitle 1</p>
<p class="typography-subtitle-2">Subtitle 2</p>
<p class="typography-body-1">Body 1. 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.</p>
<p class="typography-body-2">Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.</p>
<p class="typography-caption">Caption text</p>
<p class="typography-overline">OVERLINE TEXT</p>