UNPKG

2.58 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>Theming - 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 <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
14
15 <script src="../assets/library/iframe-content.js"></script>
16
17 <style>
18 body {
19 padding: 1em;
20 }
21 .color.grid {
22 margin: -1.5em;
23 width: 400px;
24 }
25 .ui.table {
26 table-layout: fixed;
27 }
28 .color.grid .column {
29 margin: 0.5em;
30 width: 50px;
31 height: 50px;
32 }
33 </style>
34</head>
35
36<body>
37<div class="ui three column stackable grid">
38 <div class="column">
39 <h1>Heading 1</h1>
40 <h2>Heading 2</h2>
41 <h3>Heading 3</h3>
42 <h4>Heading 4</h4>
43 <h5>Heading 5</h5>
44 <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
45 </div>
46 <div class="column">
47 <h2>Example body text</h2>
48 <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
49 <p><small>This line of text is meant to be treated as fine print.</small></p>
50 <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
51 <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
52 <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
53 </div>
54 <div class="column">
55 <div class="ui three column stackable padded middle aligned centered color grid">
56 <div class="red column">Red</div>
57 <div class="orange column">Orange</div>
58 <div class="yellow column">Yellow</div>
59 <div class="olive column">Olive</div>
60 <div class="green column">Green</div>
61 <div class="teal column">Teal</div>
62 <div class="blue column">Blue</div>
63 <div class="violet column">Violet</div>
64 <div class="purple column">Purple</div>
65 <div class="pink column">Pink</div>
66 <div class="brown column">Brown</div>
67 <div class="grey column">Grey</div>
68 <div class="black column">Black</div>
69 </div>
70 </div>
71</div>
72
73</body>
74</html>
\No newline at end of file