1 | <h2>Scale & 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><h1></h1>
|
71 | <h2><h2></h2>
|
72 | <h3><h3></h3>
|
73 | <h4><h4></h4>
|
74 | <h5><h5></h5>
|
75 | <h6><h6></h6>
|
76 |
|
77 | <h3>Formatting</h3>
|
78 |
|
79 | <p><u><u>Underlined<u></u></p>
|
80 |
|
81 | <p><b><b>Bold<b></b></p>
|
82 |
|
83 | <p><strong><strong>Strong<strong></strong></p>
|
84 |
|
85 | <p><i><italic>Italic<italic></i></p>
|
86 |
|
87 | <p><em><em>Em<em></em></p>
|
88 |
|
89 | <p><s><s>Strikethrough<s></s></p>
|
90 |
|
91 | <p><small><small>Small<small></small></p>
|
92 |
|
93 | <p><mark><mark>Mark<mark></mark></p>
|
94 |
|
95 | <h3>Body Text</h3>
|
96 |
|
97 | <p><p></p>
|
98 |
|
99 | <p class="mdl-typography--body-2"><p class="mdl-typography-body-2"></p>
|
100 |
|
101 | <p class="mdl-typography--caption"><p class="mdl-typography-caption"></p>
|
102 |
|
103 | <p class="mdl-typography--menu"><p class="mdl-typography-menu"></p>
|
104 |
|
105 | <p class="mdl-typography--button"><p class="mdl-typography-button"></p>
|
106 |
|
107 | <h3>Subtitles</h3>
|
108 |
|
109 | <h1><h1> <small>Subtitle</small></h1>
|
110 | <h2><h2> <small>Subtitle</small></h2>
|
111 | <h3><h3> <small>Subtitle</small></h3>
|
112 | <h4><h4> <small>Subtitle</small></h4>
|
113 | <h5><h5> <small>Subtitle</small></h5>
|
114 | <h6><h6> <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><blockquote></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 <pre> for multi-line code blocks.
|
162 | <pre>
|
163 | <p>This is the first line of code</p>
|
164 | <p>This is the second line of code</p>
|
165 | </pre>
|
166 | </p>
|
167 |
|
168 | <h3>Inline code blocks</h3>
|
169 | <p>Code blocks like <code><main></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>
|