UNPKG

8.98 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <!-- Standard Meta -->
5 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8
9 <!-- Site Properties -->
10 <title>Attached - Semantic</title>
11 <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
12 <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
13
14 <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
15 <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
16 <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
17
18 <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
19 <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
20 <link rel="stylesheet" type="text/css" href="../dist/components/table.css">
21 <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
22 <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
23 <link rel="stylesheet" type="text/css" href="../dist/components/message.css">
24
25 <style type="text/css">
26 h2 {
27 margin: 2em 0em;
28 }
29 .ui.container {
30 padding-top: 5em;
31 padding-bottom: 5em;
32 }
33 </style>
34</head>
35<body>
36
37<div class="ui container">
38
39 <h2 class="ui header">Attached Content</h2>
40 <div class="ui three column grid">
41 <div class="column">
42 <div class="top attached ui segment">
43 Segment 1
44 </div>
45 <div class="attached ui segment">
46 Segment 2
47 </div>
48 <div class="attached ui segment">
49 Segment 2
50 </div>
51 <div class="bottom attached ui segment">
52 Segment 3
53 </div>
54 <div class="ui segments">
55 <div class="ui segment">
56 <p>Top</p>
57 </div>
58 <div class="ui segments">
59 <div class="ui segment">
60 <p>Nested Top</p>
61 </div>
62 <div class="ui segment">
63 <p>Nested Middle</p>
64 </div>
65 <div class="ui segment">
66 <p>Nested Bottom</p>
67 </div>
68 </div>
69 <div class="ui segment">
70 <p>Middle</p>
71 </div>
72 <div class="ui horizontal segments">
73 <div class="ui segment">
74 <p>Top</p>
75 </div>
76 <div class="ui segment">
77 <p>Middle</p>
78 </div>
79 <div class="ui segment">
80 <p>Bottom</p>
81 </div>
82 </div>
83 <div class="ui segment">
84 <p>Bottom</p>
85 </div>
86 </div>
87 </div>
88 <div class="column">
89 <table class="top attached ui basic table">
90 <thead>
91 <th>Header</th>
92 <th>Header</th>
93 <th>Header</th>
94 </thead>
95 <tbody>
96 <tr>
97 <td>Cell</td>
98 <td>Cell</td>
99 <td>Cell</td>
100 </tr>
101 <tr>
102 <td>Cell</td>
103 <td>Cell</td>
104 <td>Cell</td>
105 </tr>
106 <tr>
107 <td>Cell</td>
108 <td>Cell</td>
109 <td>Cell</td>
110 </tr>
111 </tbody>
112 </table>
113 <table class="attached ui table">
114 <tbody>
115 <tr>
116 <td>Cell</td>
117 <td>Cell</td>
118 <td>Cell</td>
119 </tr>
120 <tr>
121 <td>Cell</td>
122 <td>Cell</td>
123 <td>Cell</td>
124 </tr>
125 <tr>
126 <td>Cell</td>
127 <td>Cell</td>
128 <td>Cell</td>
129 </tr>
130 </tbody>
131 </table>
132 <table class="attached ui celled selectable table">
133 <tbody>
134 <tr>
135 <td>Cell</td>
136 <td>Cell</td>
137 <td>Cell</td>
138 </tr>
139 <tr>
140 <td>Cell</td>
141 <td>Cell</td>
142 <td>Cell</td>
143 </tr>
144 <tr>
145 <td>Cell</td>
146 <td>Cell</td>
147 <td>Cell</td>
148 </tr>
149 </tbody>
150 </table>
151 <table class="bottom attached ui celled table">
152 <thead>
153 <th>Header</th>
154 <th>Header</th>
155 <th>Header</th>
156 </thead>
157 <tbody>
158 <tr>
159 <td>Cell</td>
160 <td>Cell</td>
161 <td>Cell</td>
162 </tr>
163 <tr>
164 <td>Cell</td>
165 <td>Cell</td>
166 <td>Cell</td>
167 </tr>
168 <tr>
169 <td>Cell</td>
170 <td>Cell</td>
171 <td>Cell</td>
172 </tr>
173 </tbody>
174 </table>
175 </div>
176 <div class="column">
177 <div class="top attached ui three item menu">
178 <a class="item">Item</a>
179 <a class="item">Item</a>
180 <a class="item">Item</a>
181 </div>
182 <div class="attached ui three item menu">
183 <a class="item">Item</a>
184 <a class="item">Item</a>
185 <a class="item">Item</a>
186 </div>
187 <div class="attached ui three item menu">
188 <a class="item">Item</a>
189 <a class="item">Item</a>
190 <a class="item">Item</a>
191 </div>
192 <div class="bottom attached ui three item menu">
193 <a class="item">Item</a>
194 <a class="item">Item</a>
195 <a class="item">Item</a>
196 </div>
197
198 <div class="ui top attached tabular menu">
199 <a class="active item">Active Item</a>
200 <a class="item">Item</a>
201 <a class="item">Item</a>
202 </div>
203 <div class="ui bottom attached segment">
204 Segment
205 </div>
206
207 <div class="ui top attached menu">
208 <a class="active item">Active Item</a>
209 <a class="item">Item</a>
210 <a class="item">Item</a>
211 </div>
212 <div class="ui bottom attached segment">
213 Segment
214 </div>
215
216 </div>
217 </div>
218</div>
219
220<div class="ui text container">
221
222 <h2 class="ui header">Header Groups</h2>
223
224 <h4 class="ui top attached block header">
225 Top Block Header
226 </h4>
227 <div class="ui bottom attached segment">
228 Segment
229 </div>
230
231 <div class="ui section divider"></div>
232
233 <div class="ui top attached segment">
234 Segment
235 </div>
236 <h4 class="ui bottom attached block header">
237 Bottom Block Header
238 </h4>
239
240 <div class="ui section divider"></div>
241
242 <h4 class="ui top attached block header">
243 Top Block Header
244 </h4>
245 <div class="ui attached segment">
246 Segment
247 </div>
248 <h4 class="ui attached block header">
249 Middle Block Header
250 </h4>
251 <div class="ui attached segment">
252 Segment
253 </div>
254 <h4 class="ui bottom attached block header">
255 Bottom Block Header
256 </h4>
257
258
259 <h2 class="ui header">Mixed Attached Content</h2>
260
261 <div class="ui section divider"></div>
262
263 <div class="ui top attached segment">Segment</div>
264 <div class="ui attached three item menu">
265 <a class="item">Item</a>
266 <a class="item">Item</a>
267 <a class="item">Item</a>
268 </div>
269 <div class="ui attached segment">
270 1
271 </div>
272 <div class="ui attached icon info message">
273 <i class="help circle icon"></i>
274 <div class="content">
275 Message
276 </div>
277 </div>
278 <table class="ui bottom attached table">
279 <thead>
280 <th>Header</th>
281 <th>Header</th>
282 <th>Header</th>
283 </thead>
284 <tbody>
285 <tr>
286 <td>Cell</td>
287 <td>Cell</td>
288 <td>Cell</td>
289 </tr>
290 <tr>
291 <td>Cell</td>
292 <td>Cell</td>
293 <td>Cell</td>
294 </tr>
295 <tr>
296 <td>Cell</td>
297 <td>Cell</td>
298 <td>Cell</td>
299 </tr>
300 </tbody>
301 </table>
302
303 <div class="ui section divider"></div>
304
305 <div class="ui top attached warning icon message">
306 <i class="attention icon"></i>
307 <div class="content">
308 Message
309 </div>
310 </div>
311 <table class="ui attached table">
312 <thead>
313 <th>Header</th>
314 <th>Header</th>
315 <th>Header</th>
316 </thead>
317 <tbody>
318 <tr>
319 <td>Cell</td>
320 <td>Cell</td>
321 <td>Cell</td>
322 </tr>
323 <tr>
324 <td>Cell</td>
325 <td>Cell</td>
326 <td>Cell</td>
327 </tr>
328 <tr>
329 <td>Cell</td>
330 <td>Cell</td>
331 <td>Cell</td>
332 </tr>
333 </tbody>
334 </table>
335 <div class="ui bottom attached three item menu">
336 <a class="item">Item</a>
337 <a class="item">Item</a>
338 <a class="item">Item</a>
339 </div>
340
341 <div class="ui section divider"></div>
342
343 <div class="ui top attached three item inverted menu">
344 <a class="item">Item</a>
345 <a class="item">Item</a>
346 <a class="item">Item</a>
347 </div>
348 <table class="ui attached inverted table">
349 <thead>
350 <th>Header</th>
351 <th>Header</th>
352 <th>Header</th>
353 </thead>
354 <tbody>
355 <tr>
356 <td>Cell</td>
357 <td>Cell</td>
358 <td>Cell</td>
359 </tr>
360 <tr>
361 <td>Cell</td>
362 <td>Cell</td>
363 <td>Cell</td>
364 </tr>
365 <tr>
366 <td>Cell</td>
367 <td>Cell</td>
368 <td>Cell</td>
369 </tr>
370 </tbody>
371 </table>
372 <div class="ui bottom attached inverted segment">
373 Segment
374 </div>
375
376
377</div>
378
379</body>
380
381</html>