Bedrock + Material Design

Typography

Typography

#

Typographic elements used throughout the application.

Headline 1

Lorem ipsum

<h1 class="mdc-typography--headline1">Lorem ipsum</h1>
Headline 2

Lorem ipsum

<h2 class="mdc-typography--headline2">Lorem ipsum</h2>
Headline 3

Lorem ipsum dolor sit amet

<h3 class="mdc-typography--headline3">Lorem ipsum dolor sit amet</h3>
Headline 4

Lorem ipsum dolor sit amet

<h4 class="mdc-typography--headline4">Lorem ipsum dolor sit amet</h4>
Headline 5
Lorem ipsum dolor sit amet
<h5 class="mdc-typography--headline5">Lorem ipsum dolor sit amet</h5>
Headline 6
Lorem ipsum dolor sit amet
<h6 class="mdc-typography--headline6">Lorem ipsum dolor sit amet</h6>
Subtitle 1

Lorem ipsum dolor sit amet

<p class="mdc-typography--subtitle1">Lorem ipsum dolor sit amet</p>
Subtitle 2

Lorem ipsum dolor sit amet

<p class="mdc-typography--subtitle2">Lorem ipsum dolor sit amet</p>
Body 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="mdc-typography--body1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Body 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="mdc-typography--body2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Caption

Lorem ipsum dolor sit amet

<p class="mdc-typography--caption">Lorem ipsum dolor sit amet</p>
Button

Lorem ipsum

<p class="mdc-typography--button">Lorem ipsum</p>
Overline

Lorem ipsum

<p class="mdc-typography--overline">Lorem ipsum</p>

Prototype navigation

Press Ctrl + M to toggle this navigation or click here.