third_party/ot-br-posix/repo/third_party/mdl/repo/src/typography/demo.html

   1   <h2>Scale &amp; Basic Styles</h2>
   2
   3   <div class="demo-preview-block demo-page--typography">
   4     <table>
   5       <tr>
   6         <th class="mdl-typography--caption-color-contrast">Display 4</th>
   7         <td class="mdl-typography--display-4">Light 112px</td>
   8       </tr>
   9       <tr>
  10         <th class="mdl-typography--caption-color-contrast">Display 3</th>
  11         <td class="mdl-typography--display-3">Regular 56px</td>
  12       </tr>
  13       <tr>
  14         <th class="mdl-typography--caption-color-contrast">Display 2</th>
  15         <td class="mdl-typography--display-2">Regular 45px</td>
  16       </tr>
  17       <tr>
  18         <th class="mdl-typography--caption-color-contrast">Display 1</th>
  19         <td class="mdl-typography--display-1">Regular 34px</td>
  20       </tr>
  21       <tr>
  22         <th class="mdl-typography--caption-color-contrast">Headline</th>
  23         <td class="mdl-typography--headline">Regular 24px</td>
  24       </tr>
  25       <tr>
  26         <th class="mdl-typography--caption-color-contrast">Title</th>
  27         <td class="mdl-typography--title">Medium 20px</td>
  28       </tr>
  29       <tr>
  30         <th class="mdl-typography--caption-color-contrast">Subhead</th>
  31         <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
  32       </tr>
  33       <tr>
  34         <th class="mdl-typography--caption-color-contrast">Body 2</th>
  35         <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
  36       </tr>
  37       <tr>
  38         <th class="mdl-typography--caption-color-contrast">Body 1</th>
  39         <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
  40       </tr>
  41       <tr>
  42         <th class="mdl-typography--caption-color-contrast">Body 2 (force preferred font)</th>
  43         <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
  44       </tr>
  45       <tr>
  46         <th class="mdl-typography--caption-color-contrast">Body 1 (force preferred font)</th>
  47         <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
  48       </tr>
  49       <tr>
  50         <th class="mdl-typography--caption-color-contrast">Caption</th>
  51         <td class="mdl-typography--caption">Regular 12px</td>
  52       </tr>
  53       <tr>
  54         <th class="mdl-typography--caption-color-contrast">Menu</th>
  55         <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
  56       </tr>
  57       <tr>
  58         <th class="mdl-typography--caption-color-contrast">Button</th>
  59         <td class="mdl-typography--button">Medium (All Caps) 14px</td>
  60       </tr>
  61     </table>
  62   </div>
  63
  64   <h2>HTML Elements</h2>
  65
  66   <div class="demo-preview-block">
  67
  68     <h3>Headings</h3>
  69
  70     <h1>&lt;h1&gt;</h1>
  71     <h2>&lt;h2&gt;</h2>
  72     <h3>&lt;h3&gt;</h3>
  73     <h4>&lt;h4&gt;</h4>
  74     <h5>&lt;h5&gt;</h5>
  75     <h6>&lt;h6&gt;</h6>
  76
  77     <h3>Formatting</h3>
  78
  79     <p><u>&lt;u&gt;Underlined&lt;u&gt;</u></p>
  80
  81     <p><b>&lt;b&gt;Bold&lt;b&gt;</b></p>
  82
  83     <p><strong>&lt;strong&gt;Strong&lt;strong&gt;</strong></p>
  84
  85     <p><i>&lt;italic&gt;Italic&lt;italic&gt;</i></p>
  86
  87     <p><em>&lt;em&gt;Em&lt;em&gt;</em></p>
  88
  89     <p><s>&lt;s&gt;Strikethrough&lt;s&gt;</s></p>
  90
  91     <p><small>&lt;small&gt;Small&lt;small&gt;</small></p>
  92
  93     <p><mark>&lt;mark&gt;Mark&lt;mark&gt;</mark></p>
  94
  95     <h3>Body Text</h3>
  96
  97     <p>&lt;p&gt;</p>
  98
  99     <p class="mdl-typography--body-2">&lt;p class="mdl-typography-body-2"&gt;</p>
 100
 101     <p class="mdl-typography--caption">&lt;p class="mdl-typography-caption"&gt;</p>
 102
 103     <p class="mdl-typography--menu">&lt;p class="mdl-typography-menu"&gt;</p>
 104
 105     <p class="mdl-typography--button">&lt;p class="mdl-typography-button"&gt;</p>
 106
 107     <h3>Subtitles</h3>
 108
 109     <h1>&lt;h1&gt; <small>Subtitle</small></h1>
 110     <h2>&lt;h2&gt; <small>Subtitle</small></h2>
 111     <h3>&lt;h3&gt; <small>Subtitle</small></h3>
 112     <h4>&lt;h4&gt; <small>Subtitle</small></h4>
 113     <h5>&lt;h5&gt; <small>Subtitle</small></h5>
 114     <h6>&lt;h6&gt; <small>Subtitle</small></h6>
 115
 116     <h3>Description</h3>
 117
 118     <dl>
 119       <dt>Description lists</dt>
 120       <dd>A description list is perfect for defining terms.</dd>
 121       <dt>Euismod</dt>
 122       <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
 123       <dd>Donec id elit non mi porta gravida at eget metus.</dd>
 124       <dt>Malesuada porta</dt>
 125       <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
 126     </dl>
 127   </div>
 128
 129   <h2>Quotes</h2>
 130
 131   <div class="demo-preview-block">
 132     <blockquote>&lt;blockquote&gt;</blockquote>
 133   </div>
 134
 135   <h2>Alignment</h2>
 136
 137   <p class="mdl-typography--text-left">Left aligned text.</p>
 138   <p class="mdl-typography--text-center">Center aligned text.</p>
 139   <p class="mdl-typography--text-right">Right aligned text.</p>
 140   <p class="mdl-typography--text-justify">Justified text.</p>
 141   <p class="mdl-typography--text-nowrap">No wrap text.</p>
 142
 143   <h2>Transformations</h2>
 144   <p class="mdl-typography--text-lowercase">Lowercased text.</p>
 145   <p class="mdl-typography--text-uppercase">Uppercased text.</p>
 146   <p class="mdl-typography--text-capitalize">Capitalized text.</p>
 147
 148   <h2>Addresses</h2>
 149
 150   <address>
 151     <strong>Googleplex</strong><br>
 152     1600 Amphitheatre Pkwy<br>
 153     Mountain View, CA 94043<br>
 154     <abbr title="Phone">P:</abbr> (650) 253-0000
 155   </address>
 156
 157   <h2>Code</h2>
 158
 159   <h3>Multi-line code blocks</h3>
 160   <p>
 161     Use &lt;pre&gt; for multi-line code blocks.
 162     <pre>
 163 &lt;p&gt;This is the first line of code&lt;/p&gt;
 164 &lt;p&gt;This is the second line of code&lt;/p&gt;
 165   </pre>
 166   </p>
 167
 168   <h3>Inline code blocks</h3>
 169   <p>Code blocks like <code>&lt;main&gt;</code> could be displayed inline.</p>
 170
 171
 172   <h2>Color Contrasts</h2>
 173
 174   <div class="demo-preview-block">
 175     <div class="demo-typography--white">
 176       <p class="mdl-typography--caption-color-contrast">Caption</p>
 177
 178       <p class="mdl-typography--body-2-color-contrast">Body</p>
 179
 180       <p class="mdl-typography--subhead-color-contrast">Subhead</p>
 181
 182       <p class="mdl-typography--title-color-contrast">Title</p>
 183
 184       <p class="mdl-typography--display-1-color-contrast">Display</p>
 185     </div>
 186   </div>
 187
 188   <div class="demo-preview-block">
 189     <div class="demo-typography--black">
 190         <p class="mdl-typography--caption-color-contrast">Caption</p>
 191
 192         <p class="mdl-typography--body-2-color-contrast">Body</p>
 193
 194         <p class="mdl-typography--subhead-color-contrast">Subhead</p>
 195
 196         <p class="mdl-typography--title-color-contrast">Title</p>
 197
 198         <p class="mdl-typography--display-1-color-contrast">Display</p>
 199     </div>
 200   </div>
 201
 202   <div class="demo-preview-block">
 203     <div class="demo-typography--img-1">
 204         <p class="mdl-typography--caption-color-contrast">Caption</p>
 205
 206         <p class="mdl-typography--body-2-color-contrast">Body</p>
 207
 208         <p class="mdl-typography--subhead-color-contrast">Subhead</p>
 209
 210         <p class="mdl-typography--title-color-contrast">Title</p>
 211
 212         <p class="mdl-typography--display-1-color-contrast">Display</p>
 213     </div>
 214   </div>
 215
 216   <div class="demo-preview-block">
 217     <div class="demo-typography--img-2">
 218       <p class="mdl-typography--caption-color-contrast">Caption</p>
 219
 220       <p class="mdl-typography--body-2-color-contrast">Body</p>
 221
 222       <p class="mdl-typography--subhead-color-contrast">Subhead</p>
 223
 224       <p class="mdl-typography--title-color-contrast">Title</p>
 225
 226       <p class="mdl-typography--display-1-color-contrast">Display</p>
 227     </div>
 228   </div>