UNPKG

7.4 kBHTMLView Raw
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>