318 lines
8.4 KiB
HTML
318 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Typography</title>
|
|
|
|
<link rel="stylesheet" href="../../css/material.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Scale & Basic Styles</h2>
|
|
|
|
<div class="PreviewBlock">
|
|
<table>
|
|
<tr>
|
|
<th>Display 4</th>
|
|
<td class="mdl-typography--display-4">Light 112px</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Display 3</th>
|
|
<td class="mdl-typography--display-3">Regular 56px</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Display 2</th>
|
|
<td class="mdl-typography--display-2">Regular 45px</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Display 1</th>
|
|
<td class="mdl-typography--display-1">Regular 34px</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Headline</th>
|
|
<td class="mdl-typography--headline">Regular 24px</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Title</th>
|
|
<td class="mdl-typography--title">Medium 20px</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Subhead</th>
|
|
<td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Body 2</th>
|
|
<td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Body 1</th>
|
|
<td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Body 2 (force preferred font)</th>
|
|
<td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Body 1 (force preferred font)</th>
|
|
<td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Caption</th>
|
|
<td class="mdl-typography--caption">Regular 12px</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Menu</th>
|
|
<td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Button</th>
|
|
<td class="mdl-typography--button">Medium (All Caps) 14px</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>HTML Elements</h2>
|
|
|
|
<div class="PreviewBlock">
|
|
|
|
<h3>Headings</h3>
|
|
|
|
<h1><h1></h1>
|
|
<h2><h2></h2>
|
|
<h3><h3></h3>
|
|
<h4><h4></h4>
|
|
<h5><h5></h5>
|
|
<h6><h6></h6>
|
|
|
|
<h3>Formatting</h3>
|
|
|
|
<p><u><u>Underlined<u></u></p>
|
|
|
|
<p><b><b>Bold<b></b></p>
|
|
|
|
<p><strong><strong>Strong<strong></strong></p>
|
|
|
|
<p><i><italic>Italic<italic></i></p>
|
|
|
|
<p><em><em>Em<em></em></p>
|
|
|
|
<p><s><s>Strikethrough<s></s></p>
|
|
|
|
<p><small><small>Small<small></small></p>
|
|
|
|
<p><mark><mark>Mark<mark></mark></p>
|
|
|
|
<h3>Body Text</h3>
|
|
|
|
<p><p></p>
|
|
|
|
<p class="mdl-typography--body-2"><p class="mdl-typography-body-2"></p>
|
|
|
|
<p class="mdl-typography--caption"><p class="mdl-typography-caption"></p>
|
|
|
|
<p class="mdl-typography--menu"><p class="mdl-typography-menu"></p>
|
|
|
|
<p class="mdl-typography--button"><p class="mdl-typography-button"></p>
|
|
|
|
<h3>Subtitles</h3>
|
|
|
|
<h1><h1> <small>Subtitle</small></h1>
|
|
<h2><h2> <small>Subtitle</small></h2>
|
|
<h3><h3> <small>Subtitle</small></h3>
|
|
<h4><h4> <small>Subtitle</small></h4>
|
|
<h5><h5> <small>Subtitle</small></h5>
|
|
<h6><h6> <small>Subtitle</small></h6>
|
|
|
|
<h3>Description</h3>
|
|
|
|
<dl>
|
|
<dt>Description lists</dt>
|
|
<dd>A description list is perfect for defining terms.</dd>
|
|
<dt>Euismod</dt>
|
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
|
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
|
<dt>Malesuada porta</dt>
|
|
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<h2>Quotes</h2>
|
|
|
|
<div class="PreviewBlock">
|
|
<blockquote><blockquote></blockquote>
|
|
</div>
|
|
|
|
<h2>Alignment</h2>
|
|
|
|
<p class="mdl-typography--text-left">Left aligned text.</p>
|
|
<p class="mdl-typography--text-center">Center aligned text.</p>
|
|
<p class="mdl-typography--text-right">Right aligned text.</p>
|
|
<p class="mdl-typography--text-justify">Justified text.</p>
|
|
<p class="mdl-typography--text-nowrap">No wrap text.</p>
|
|
|
|
<h2>Transformations</h2>
|
|
<p class="mdl-typography--text-lowercase">Lowercased text.</p>
|
|
<p class="mdl-typography--text-uppercase">Uppercased text.</p>
|
|
<p class="mdl-typography--text-capitalize">Capitalized text.</p>
|
|
|
|
<h2>Addresses</h2>
|
|
|
|
<address>
|
|
<strong>Googleplex</strong><br>
|
|
1600 Amphitheatre Pkwy<br>
|
|
Mountain View, CA 94043<br>
|
|
<abbr title="Phone">P:</abbr> (650) 253-0000
|
|
</address>
|
|
|
|
<h2>Code</h2>
|
|
|
|
<h3>Multi-line code blocks</h3>
|
|
<p>
|
|
Use <pre> for multi-line code blocks.
|
|
<pre>
|
|
<p>This is the first line of code</p>
|
|
<p>This is the second line of code</p>
|
|
</pre>
|
|
</p>
|
|
|
|
<h3>Inline code blocks</h3>
|
|
<p>Code blocks like <code><main></code> could be displayed inline.</p>
|
|
|
|
<h2>Tables</h2>
|
|
|
|
<h3>Basic table</h3>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Username</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Larry</td>
|
|
<td>Page</td>
|
|
<td>+LarryPage</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Sergey</td>
|
|
<td>Brin</td>
|
|
<td>+SergeyBrin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Eric</td>
|
|
<td>Schmidt</td>
|
|
<td>+EricSchmidt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Striped Table</h3>
|
|
|
|
<table class="mdl-typography--table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Username</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Larry</td>
|
|
<td>Page</td>
|
|
<td>+LarryPage</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Sergey</td>
|
|
<td>Brin</td>
|
|
<td>+SergeyBrin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Eric</td>
|
|
<td>Schmidt</td>
|
|
<td>+EricSchmidt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<h2>Color Contrasts</h2>
|
|
|
|
<div class="PreviewBlock">
|
|
<div class="PreviewBlock--white">
|
|
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
|
|
|
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
|
|
|
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
|
|
|
<p class="mdl-typography--title-color-contrast">Title</p>
|
|
|
|
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="PreviewBlock">
|
|
<div class="PreviewBlock--black">
|
|
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
|
|
|
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
|
|
|
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
|
|
|
<p class="mdl-typography--title-color-contrast">Title</p>
|
|
|
|
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="PreviewBlock">
|
|
<div class="PreviewBlock--img-1">
|
|
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
|
|
|
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
|
|
|
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
|
|
|
<p class="mdl-typography--title-color-contrast">Title</p>
|
|
|
|
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="PreviewBlock">
|
|
<div class="PreviewBlock--img-2">
|
|
<p class="mdl-typography--caption-color-contrast">Caption</p>
|
|
|
|
<p class="mdl-typography--body-2-color-contrast">Body</p>
|
|
|
|
<p class="mdl-typography--subhead-color-contrast">Subhead</p>
|
|
|
|
<p class="mdl-typography--title-color-contrast">Title</p>
|
|
|
|
<p class="mdl-typography--display-1-color-contrast">Display</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|