| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>typography test</title> |
| |
| <!-- Fonts --> |
| <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'> |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" |
| rel="stylesheet"> |
| |
| <!-- Page styles --> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css"> |
| <link rel="stylesheet" href="../../material.min.css"> |
| <link rel="stylesheet" href="../../components/demos.css"> |
| <script src="../../material.min.js"></script> |
| |
| |
| <style> |
| /** |
| * Copyright 2015 Google Inc. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| .demo-page--typography { |
| color: rgba(0, 0, 0, 0.87); |
| } |
| |
| .demo-page--typography table th { |
| padding-right: 80px; |
| |
| vertical-align: top; |
| text-align: left; |
| } |
| |
| .demo-typography--white { |
| background-color: white; |
| color: black; |
| } |
| |
| .demo-typography--black { |
| background-color: black; |
| color: white; |
| } |
| |
| .demo-typography--white, |
| .demo-typography--black, |
| .demo-typography--img-1, |
| .demo-typography--img-2 { |
| width: 360px; |
| height: 272px; |
| |
| padding: 16px; |
| box-sizing: border-box; |
| } |
| |
| .demo-typography--img-1 { |
| background-image: url(../demo-images/img-1.png); |
| color: white; |
| } |
| |
| .demo-typography--img-2 { |
| background-image: url(../demo-images/img-2.png); |
| color: white; |
| } |
| |
| </style> |
| |
| </head> |
| <body> |
| |
| <div style="padding-top: 24px;"> |
| |
| |
| <h2>Scale & Basic Styles</h2> |
| |
| <div class="demo-preview-block demo-page--typography"> |
| <table> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Display 4</th> |
| <td class="mdl-typography--display-4">Light 112px</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Display 3</th> |
| <td class="mdl-typography--display-3">Regular 56px</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Display 2</th> |
| <td class="mdl-typography--display-2">Regular 45px</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Display 1</th> |
| <td class="mdl-typography--display-1">Regular 34px</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Headline</th> |
| <td class="mdl-typography--headline">Regular 24px</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Title</th> |
| <td class="mdl-typography--title">Medium 20px</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Subhead</th> |
| <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Body 2</th> |
| <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Body 1</th> |
| <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">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 class="mdl-typography--caption-color-contrast">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 class="mdl-typography--caption-color-contrast">Caption</th> |
| <td class="mdl-typography--caption">Regular 12px</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Menu</th> |
| <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td> |
| </tr> |
| <tr> |
| <th class="mdl-typography--caption-color-contrast">Button</th> |
| <td class="mdl-typography--button">Medium (All Caps) 14px</td> |
| </tr> |
| </table> |
| </div> |
| |
| <h2>HTML Elements</h2> |
| |
| <div class="demo-preview-block"> |
| |
| <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="demo-preview-block"> |
| <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>Color Contrasts</h2> |
| |
| <div class="demo-preview-block"> |
| <div class="demo-typography--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="demo-preview-block"> |
| <div class="demo-typography--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="demo-preview-block"> |
| <div class="demo-typography--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="demo-preview-block"> |
| <div class="demo-typography--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> |
| |
| |
| </div> |
| <!-- Built with love using Material Design Lite --> |
| |
| |
| <script> |
| |
| </script> |
| </body> |
| </html> |