-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathcontent-blocks.php
More file actions
220 lines (191 loc) · 7.84 KB
/
content-blocks.php
File metadata and controls
220 lines (191 loc) · 7.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<h1>H1. Fusce sed molestie eros cras non justo nunc.</h1>
<h2>H2. Nulla eleifend tortor vitae lorem accumsan</h2>
<h3>H3. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h3>
<h4>H4. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h4>
<h5>H5. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h5>
<h6>H6. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Morbi justo lorem</a>, congue eu ipsum eu, feugiat ornare ex. Nulla eleifend tortor vitae lorem accumsan, ac pellentesque elit pretium. Mauris ac ipsum eros. Suspendisse dolor mi, viverra sit amet diam in, convallis tempus ex. Ut cursus mi vel lacus facilisis suscipit. Curabitur facilisis turpis in augue finibus, eu congue magna condimentum.</p>
<blockquote>
Blockquote, massa ut fermentum maximus, nisl libero eleifend odio, ornare consectetur massa velit vel tellus.
<cite>Firstname Lastname<br><span class="os-u-faded">title/position</span></cite>
</blockquote>
<p>Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et interdum sem, et convallis lacus. Fusce efficitur, massa ut fermentum maximus, nisl libero eleifend odio, ornare consectetur massa velit vel tellus. Morbi rhoncus arcu at orci blandit, non dapibus est vestibulum. Fusce in vestibulum metus. Sed gravida eu mi non pharetra. Suspendisse egestas nibh imperdiet augue iaculis posuere. Donec bibendum diam rhoncus, porta nulla nec, facilisis est. Donec in erat nec odio venenatis faucibus et ac nunc.</p>
<hr/>
<h3>Unordered Lists</h3>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>
Lists can be nested inside of each other
<ul>
<li>
This is a nested list item
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>
<h3>Ordered Lists</h3>
<ol>
<li>This is a list item in an ordered list</li>
<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
<li>
Lists can be nested inside of each other
<ol>
<li>
This is a nested list item
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an ordered list</li>
</ol>
</li>
<li>This is another nested list item in an ordered list</li>
</ol>
</li>
<li>This is the last list item</li>
</ol>
<hr/>
<h3>Preformatted & code</h3>
<pre>
.example {
display: block;
margin: 1em;
float: left;
}</pre>
<hr/>
<h3>Forms</h3>
<form>
<p>
<label class="os-b-label" for="text">Text Input <abbr title="Required">*</abbr></label>
<input id="text" type="text" class="os-b-input" placeholder="Text Input">
</p>
<p>
<label class="os-b-label" for="password">Password</label>
<input id="password" type="password" class="os-b-input" placeholder="Type your Password">
</p>
<p>
<label class="os-b-label" for="webaddress">Web Address</label>
<input id="webaddress" type="url" class="os-b-input" placeholder="http://yoursite.com">
</p>
<p>
<label class="os-b-label" for="emailaddress">Email Address</label>
<input id="emailaddress" type="email" class="os-b-input" placeholder="name@email.com">
</p>
<p>
<label class="os-b-label" for="search">Search</label>
<input id="search" type="search" class="os-b-input" placeholder="Enter Search Term">
</p>
<p>
<label class="os-b-label" for="number">Number Input <abbr title="Required">*</abbr></label>
<input id="number" type="number" class="os-b-input" placeholder="Enter a Number" pattern="[0-9]*">
</p>
<p>
<label class="os-b-label" for="textarea">Textarea</label>
<textarea id="textarea" class="os-b-input" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
<div class="os-l-row">
<div class="os-l-column">
<p><input id="submit" value="Standard Button" type="button" class="os-b-btn"/></p>
<p style="background:black; padding: 1em;"><input id="reset" value="Inverse Button" type="button" class="os-b-btn os-is-inverse"/></p>
<p><input id="button" value="Small Button" type="button" class="os-b-btn os-is-small"/></p>
<p><input id="disabled" value="Disabled Button" type="button" class="os-b-btn os-is-disabled" disabled/></p>
<p>
<button class="os-b-btn--circular">←</button>
<button class="os-b-btn--circular">→</button>
</p>
</div>
<div class="os-l-column">
<p><input id="submit" value="Solid Button" type="button" class="os-b-btn os-is-solid"/></p>
<p style="background:black; padding: 1em;"><input id="reset" value="Solid & Inverse" type="button" class="os-b-btn os-is-inverse os-is-solid"/></p>
<p><input id="button" value="Small & Solid" type="button" class="os-b-btn os-is-small os-is-solid"/></p>
<p><input id="disabled" value="Disabled & Solid" type="button" class="os-b-btn os-is-solid os-is-disabled" disabled/></p>
</div>
</div>
</form>
<hr/>
<h3>Tables</h3>
<h4>Default</h4>
<pre><code><table class="os-b-table"></code></pre>
<table class="os-b-table">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
</tr>
</tfoot>
</table>
<h4>Striped & Hoverable</h4>
<pre><code><table class="os-b-table--striped os-is-hoverable"></code></pre>
<table class="os-b-table--striped os-is-hoverable">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
</tr>
</tfoot>
</table>