UNPKG

10.9 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en-gb" dir="ltr">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Tile - UIkit tests</title>
8 <script src="js/test.js"></script>
9 </head>
10
11 <body>
12
13 <div class="uk-section">
14 <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
15 <div>
16
17 <div class="uk-tile uk-tile-default">
18 <h3>Tile Default</h3>
19 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
20 <p uk-margin>
21 <a class="uk-button uk-button-default" href="#">Button</a>
22 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
23 </p>
24 </div>
25
26 </div>
27 <div>
28
29 <div class="uk-tile uk-tile-muted">
30 <h3>Tile Muted</h3>
31 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
32 <p uk-margin>
33 <a class="uk-button uk-button-default" href="#">Button</a>
34 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
35 </p>
36 </div>
37
38 </div>
39 <div>
40
41 <div class="uk-tile uk-tile-primary">
42 <h3>Tile Primary</h3>
43 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
44 <p uk-margin>
45 <a class="uk-button uk-button-default" href="#">Button</a>
46 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
47 </p>
48 </div>
49
50 </div>
51 <div>
52
53 <div class="uk-tile uk-tile-secondary">
54 <h3>Tile Secondary</h3>
55 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
56 <p uk-margin>
57 <a class="uk-button uk-button-default" href="#">Button</a>
58 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
59 </p>
60 </div>
61
62 </div>
63 </div>
64 </div>
65
66 <div class="uk-section">
67 <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
68 <div>
69
70 <div class="uk-tile uk-tile-default uk-tile-small">
71 <h3>Default Small</h3>
72 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
73 <p uk-margin>
74 <a class="uk-button uk-button-default" href="#">Button</a>
75 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
76 </p>
77 </div>
78
79 </div>
80 <div>
81
82 <div class="uk-tile uk-tile-muted uk-tile-small">
83 <h3>Muted Small</h3>
84 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
85 <p uk-margin>
86 <a class="uk-button uk-button-default" href="#">Button</a>
87 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
88 </p>
89 </div>
90
91 </div>
92 <div>
93
94 <div class="uk-tile uk-tile-primary uk-tile-small">
95 <h3>Primary Small</h3>
96 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
97 <p uk-margin>
98 <a class="uk-button uk-button-default" href="#">Button</a>
99 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
100 </p>
101 </div>
102
103 </div>
104 <div>
105
106 <div class="uk-tile uk-tile-secondary uk-tile-small">
107 <h3>Secondary Small</h3>
108 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
109 <p uk-margin>
110 <a class="uk-button uk-button-default" href="#">Button</a>
111 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
112 </p>
113 </div>
114
115 </div>
116 </div>
117 </div>
118
119 <div class="uk-section">
120 <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
121 <div>
122
123 <div class="uk-tile uk-tile-default uk-tile-large">
124 <h3>Default Large</h3>
125 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
126 <p uk-margin>
127 <a class="uk-button uk-button-default" href="#">Button</a>
128 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
129 </p>
130 </div>
131
132 </div>
133 <div>
134
135 <div class="uk-tile uk-tile-muted uk-tile-large">
136 <h3>Muted Large</h3>
137 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
138 <p uk-margin>
139 <a class="uk-button uk-button-default" href="#">Button</a>
140 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
141 </p>
142 </div>
143
144 </div>
145 <div>
146
147 <div class="uk-tile uk-tile-primary uk-tile-large">
148 <h3>Primary Large</h3>
149 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
150 <p uk-margin>
151 <a class="uk-button uk-button-default" href="#">Button</a>
152 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
153 </p>
154 </div>
155
156 </div>
157 <div>
158
159 <div class="uk-tile uk-tile-secondary uk-tile-large">
160 <h3>Secondary Large</h3>
161 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
162 <p uk-margin>
163 <a class="uk-button uk-button-default" href="#">Button</a>
164 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
165 </p>
166 </div>
167
168 </div>
169 </div>
170 </div>
171
172 <div class="uk-section">
173 <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
174 <div>
175
176 <div class="uk-tile uk-tile-default uk-tile-xlarge">
177 <h3>Default X-Large</h3>
178 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
179 <p uk-margin>
180 <a class="uk-button uk-button-default" href="#">Button</a>
181 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
182 </p>
183 </div>
184
185 </div>
186 <div>
187
188 <div class="uk-tile uk-tile-muted uk-tile-xlarge">
189 <h3>Muted X-Large</h3>
190 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
191 <p uk-margin>
192 <a class="uk-button uk-button-default" href="#">Button</a>
193 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
194 </p>
195 </div>
196
197 </div>
198 <div>
199
200 <div class="uk-tile uk-tile-primary uk-tile-xlarge">
201 <h3>Primary X-Large</h3>
202 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
203 <p uk-margin>
204 <a class="uk-button uk-button-default" href="#">Button</a>
205 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
206 </p>
207 </div>
208
209 </div>
210 <div>
211
212 <div class="uk-tile uk-tile-secondary uk-tile-xlarge">
213 <h3>Secondary X-Large</h3>
214 <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
215 <p uk-margin>
216 <a class="uk-button uk-button-default" href="#">Button</a>
217 <a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
218 </p>
219 </div>
220
221 </div>
222 </div>
223 </div>
224
225 </body>
226</html>