Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / components / typography / demo.html
blob: 12f4ac86ec3f7bc6b12e77493e5ea0d397972c0a [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>typography test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23 /**
24 * Copyright 2015 Google Inc. All Rights Reserved.
25 *
26 * Licensed under the Apache License, Version 2.0 (the "License");
27 * you may not use this file except in compliance with the License.
28 * You may obtain a copy of the License at
29 *
30 * http://www.apache.org/licenses/LICENSE-2.0
31 *
32 * Unless required by applicable law or agreed to in writing, software
33 * distributed under the License is distributed on an "AS IS" BASIS,
34 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
35 * See the License for the specific language governing permissions and
36 * limitations under the License.
37 */
38
39.demo-page--typography {
40 color: rgba(0, 0, 0, 0.87);
41}
42
43.demo-page--typography table th {
44 padding-right: 80px;
45
46 vertical-align: top;
47 text-align: left;
48}
49
50.demo-typography--white {
51 background-color: white;
52 color: black;
53}
54
55.demo-typography--black {
56 background-color: black;
57 color: white;
58}
59
60.demo-typography--white,
61.demo-typography--black,
62.demo-typography--img-1,
63.demo-typography--img-2 {
64 width: 360px;
65 height: 272px;
66
67 padding: 16px;
68 box-sizing: border-box;
69}
70
71.demo-typography--img-1 {
72 background-image: url(../demo-images/img-1.png);
73 color: white;
74}
75
76.demo-typography--img-2 {
77 background-image: url(../demo-images/img-2.png);
78 color: white;
79}
80
81 </style>
82
83 </head>
84 <body>
85
86 <div style="padding-top: 24px;">
87
88
89 <h2>Scale &amp; Basic Styles</h2>
90
91 <div class="demo-preview-block demo-page--typography">
92 <table>
93 <tr>
94 <th class="mdl-typography--caption-color-contrast">Display 4</th>
95 <td class="mdl-typography--display-4">Light 112px</td>
96 </tr>
97 <tr>
98 <th class="mdl-typography--caption-color-contrast">Display 3</th>
99 <td class="mdl-typography--display-3">Regular 56px</td>
100 </tr>
101 <tr>
102 <th class="mdl-typography--caption-color-contrast">Display 2</th>
103 <td class="mdl-typography--display-2">Regular 45px</td>
104 </tr>
105 <tr>
106 <th class="mdl-typography--caption-color-contrast">Display 1</th>
107 <td class="mdl-typography--display-1">Regular 34px</td>
108 </tr>
109 <tr>
110 <th class="mdl-typography--caption-color-contrast">Headline</th>
111 <td class="mdl-typography--headline">Regular 24px</td>
112 </tr>
113 <tr>
114 <th class="mdl-typography--caption-color-contrast">Title</th>
115 <td class="mdl-typography--title">Medium 20px</td>
116 </tr>
117 <tr>
118 <th class="mdl-typography--caption-color-contrast">Subhead</th>
119 <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
120 </tr>
121 <tr>
122 <th class="mdl-typography--caption-color-contrast">Body 2</th>
123 <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
124 </tr>
125 <tr>
126 <th class="mdl-typography--caption-color-contrast">Body 1</th>
127 <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
128 </tr>
129 <tr>
130 <th class="mdl-typography--caption-color-contrast">Body 2 (force preferred font)</th>
131 <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
132 </tr>
133 <tr>
134 <th class="mdl-typography--caption-color-contrast">Body 1 (force preferred font)</th>
135 <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
136 </tr>
137 <tr>
138 <th class="mdl-typography--caption-color-contrast">Caption</th>
139 <td class="mdl-typography--caption">Regular 12px</td>
140 </tr>
141 <tr>
142 <th class="mdl-typography--caption-color-contrast">Menu</th>
143 <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
144 </tr>
145 <tr>
146 <th class="mdl-typography--caption-color-contrast">Button</th>
147 <td class="mdl-typography--button">Medium (All Caps) 14px</td>
148 </tr>
149 </table>
150 </div>
151
152 <h2>HTML Elements</h2>
153
154 <div class="demo-preview-block">
155
156 <h3>Headings</h3>
157
158 <h1>&lt;h1&gt;</h1>
159 <h2>&lt;h2&gt;</h2>
160 <h3>&lt;h3&gt;</h3>
161 <h4>&lt;h4&gt;</h4>
162 <h5>&lt;h5&gt;</h5>
163 <h6>&lt;h6&gt;</h6>
164
165 <h3>Formatting</h3>
166
167 <p><u>&lt;u&gt;Underlined&lt;u&gt;</u></p>
168
169 <p><b>&lt;b&gt;Bold&lt;b&gt;</b></p>
170
171 <p><strong>&lt;strong&gt;Strong&lt;strong&gt;</strong></p>
172
173 <p><i>&lt;italic&gt;Italic&lt;italic&gt;</i></p>
174
175 <p><em>&lt;em&gt;Em&lt;em&gt;</em></p>
176
177 <p><s>&lt;s&gt;Strikethrough&lt;s&gt;</s></p>
178
179 <p><small>&lt;small&gt;Small&lt;small&gt;</small></p>
180
181 <p><mark>&lt;mark&gt;Mark&lt;mark&gt;</mark></p>
182
183 <h3>Body Text</h3>
184
185 <p>&lt;p&gt;</p>
186
187 <p class="mdl-typography--body-2">&lt;p class="mdl-typography-body-2"&gt;</p>
188
189 <p class="mdl-typography--caption">&lt;p class="mdl-typography-caption"&gt;</p>
190
191 <p class="mdl-typography--menu">&lt;p class="mdl-typography-menu"&gt;</p>
192
193 <p class="mdl-typography--button">&lt;p class="mdl-typography-button"&gt;</p>
194
195 <h3>Subtitles</h3>
196
197 <h1>&lt;h1&gt; <small>Subtitle</small></h1>
198 <h2>&lt;h2&gt; <small>Subtitle</small></h2>
199 <h3>&lt;h3&gt; <small>Subtitle</small></h3>
200 <h4>&lt;h4&gt; <small>Subtitle</small></h4>
201 <h5>&lt;h5&gt; <small>Subtitle</small></h5>
202 <h6>&lt;h6&gt; <small>Subtitle</small></h6>
203
204 <h3>Description</h3>
205
206 <dl>
207 <dt>Description lists</dt>
208 <dd>A description list is perfect for defining terms.</dd>
209 <dt>Euismod</dt>
210 <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
211 <dd>Donec id elit non mi porta gravida at eget metus.</dd>
212 <dt>Malesuada porta</dt>
213 <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
214 </dl>
215 </div>
216
217 <h2>Quotes</h2>
218
219 <div class="demo-preview-block">
220 <blockquote>&lt;blockquote&gt;</blockquote>
221 </div>
222
223 <h2>Alignment</h2>
224
225 <p class="mdl-typography--text-left">Left aligned text.</p>
226 <p class="mdl-typography--text-center">Center aligned text.</p>
227 <p class="mdl-typography--text-right">Right aligned text.</p>
228 <p class="mdl-typography--text-justify">Justified text.</p>
229 <p class="mdl-typography--text-nowrap">No wrap text.</p>
230
231 <h2>Transformations</h2>
232 <p class="mdl-typography--text-lowercase">Lowercased text.</p>
233 <p class="mdl-typography--text-uppercase">Uppercased text.</p>
234 <p class="mdl-typography--text-capitalize">Capitalized text.</p>
235
236 <h2>Addresses</h2>
237
238 <address>
239 <strong>Googleplex</strong><br>
240 1600 Amphitheatre Pkwy<br>
241 Mountain View, CA 94043<br>
242 <abbr title="Phone">P:</abbr> (650) 253-0000
243 </address>
244
245 <h2>Code</h2>
246
247 <h3>Multi-line code blocks</h3>
248 <p>
249 Use &lt;pre&gt; for multi-line code blocks.
250 <pre>
251&lt;p&gt;This is the first line of code&lt;/p&gt;
252&lt;p&gt;This is the second line of code&lt;/p&gt;
253 </pre>
254 </p>
255
256 <h3>Inline code blocks</h3>
257 <p>Code blocks like <code>&lt;main&gt;</code> could be displayed inline.</p>
258
259
260 <h2>Color Contrasts</h2>
261
262 <div class="demo-preview-block">
263 <div class="demo-typography--white">
264 <p class="mdl-typography--caption-color-contrast">Caption</p>
265
266 <p class="mdl-typography--body-2-color-contrast">Body</p>
267
268 <p class="mdl-typography--subhead-color-contrast">Subhead</p>
269
270 <p class="mdl-typography--title-color-contrast">Title</p>
271
272 <p class="mdl-typography--display-1-color-contrast">Display</p>
273 </div>
274 </div>
275
276 <div class="demo-preview-block">
277 <div class="demo-typography--black">
278 <p class="mdl-typography--caption-color-contrast">Caption</p>
279
280 <p class="mdl-typography--body-2-color-contrast">Body</p>
281
282 <p class="mdl-typography--subhead-color-contrast">Subhead</p>
283
284 <p class="mdl-typography--title-color-contrast">Title</p>
285
286 <p class="mdl-typography--display-1-color-contrast">Display</p>
287 </div>
288 </div>
289
290 <div class="demo-preview-block">
291 <div class="demo-typography--img-1">
292 <p class="mdl-typography--caption-color-contrast">Caption</p>
293
294 <p class="mdl-typography--body-2-color-contrast">Body</p>
295
296 <p class="mdl-typography--subhead-color-contrast">Subhead</p>
297
298 <p class="mdl-typography--title-color-contrast">Title</p>
299
300 <p class="mdl-typography--display-1-color-contrast">Display</p>
301 </div>
302 </div>
303
304 <div class="demo-preview-block">
305 <div class="demo-typography--img-2">
306 <p class="mdl-typography--caption-color-contrast">Caption</p>
307
308 <p class="mdl-typography--body-2-color-contrast">Body</p>
309
310 <p class="mdl-typography--subhead-color-contrast">Subhead</p>
311
312 <p class="mdl-typography--title-color-contrast">Title</p>
313
314 <p class="mdl-typography--display-1-color-contrast">Display</p>
315 </div>
316 </div>
317
318
319 </div>
320 <!-- Built with love using Material Design Lite -->
321
322
323 <script>
324
325 </script>
326 </body>
327</html>