Project

General

Profile

1
<div class="uk-offcanvas-content">
2

    
3
  <nav class="uk-navbar-container">
4
    <div class="uk-container">
5
      <div uk-navbar="" class="uk-navbar">
6
        <div class="uk-navbar-left">
7

    
8
          <a class="uk-navbar-item uk-logo" href="#">Logo</a>
9

    
10
          <ul class="uk-navbar-nav">
11
            <li class="uk-active"><a href="#">Active</a></li>
12
            <li>
13
              <a href="#" aria-expanded="false">Parent</a>
14
              <div class="uk-navbar-dropdown">
15
                <ul class="uk-nav uk-navbar-dropdown-nav">
16
                  <li class="uk-active"><a href="#">Active</a></li>
17
                  <li class="uk-parent">
18
                    <a href="#">Parent</a>
19
                    <ul class="uk-nav-sub">
20
                      <li><a href="#">Sub item</a></li>
21
                      <li><a href="#">Sub item</a></li>
22
                    </ul>
23
                  </li>
24
                  <li class="uk-nav-header">Header</li>
25
                  <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li>
26
                  <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li>
27
                  <li class="uk-nav-divider"></li>
28
                  <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
29
                </ul>
30
              </div>
31
            </li>
32
            <li><a href="#">Item</a></li>
33
            <li><a href="#">Item</a></li>
34
          </ul>
35

    
36
        </div>
37
        <div class="uk-navbar-right">
38
          <a class="uk-navbar-toggle uk-icon" href="#modal" uk-icon="icon: more-vertical" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="more-vertical"><circle cx="10" cy="3" r="2"></circle><circle cx="10" cy="10" r="2"></circle><circle cx="10" cy="17" r="2"></circle></svg></a>
39
          <a class="uk-navbar-toggle uk-icon uk-search-icon" href="#modal-search" uk-search-icon="" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></a>
40
          <a class="uk-navbar-toggle uk-icon uk-navbar-toggle-icon" href="#offcanvas" uk-navbar-toggle-icon="" uk-toggle=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="navbar-toggle-icon"><rect y="9" width="20" height="2"></rect><rect y="3" width="20" height="2"></rect><rect y="15" width="20" height="2"></rect></svg></a>
41
        </div>
42
      </div>
43
    </div>
44
  </nav>
45

    
46
  <div class="uk-section uk-section-default">
47
    <div class="uk-container">
48

    
49
      <div uk-grid="" class="uk-grid">
50
        <div class="uk-width-2-3@m uk-first-column">
51

    
52
          <ul class="uk-breadcrumb">
53
            <li><a href="#">Home</a></li>
54
            <li><a href="#">Blog</a></li>
55
            <li class="uk-disabled"><a>Category</a></li>
56
            <li><span>Post</span></li>
57
          </ul>
58

    
59
          <article class="uk-article">
60

    
61
            <h1 class="uk-article-title"><a class="uk-link-reset" href="#">Article Title</a></h1>
62

    
63
            <hr class="uk-divider-small">
64

    
65
            <p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
66

    
67
            <p class="uk-column-1-2@s uk-dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
68

    
69
            <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
70

    
71
            <hr class="uk-divider-icon uk-margin-medium">
72

    
73
            <div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid="">
74
              <div class="uk-first-column">
75
                <button class="uk-button uk-button-default" aria-expanded="false">Default</button>
76
                <div uk-dropdown="mode: click" class="uk-dropdown">
77
                  <ul class="uk-nav uk-dropdown-nav">
78
                    <li class="uk-active"><a href="#">Active</a></li>
79
                    <li class="uk-parent">
80
                      <a href="#">Parent</a>
81
                      <ul class="uk-nav-sub">
82
                        <li><a href="#">Sub item</a></li>
83
                        <li><a href="#">Sub item</a></li>
84
                      </ul>
85
                    </li>
86
                    <li class="uk-nav-header">Header</li>
87
                    <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li>
88
                    <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li>
89
                    <li class="uk-nav-divider"></li>
90
                    <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
91
                  </ul>
92
                </div>
93
              </div>
94
              <div>
95
                <button class="uk-button uk-button-primary">Primary</button>
96
              </div>
97
              <div>
98
                <button class="uk-button uk-button-secondary">Secondary</button>
99
              </div>
100
              <div>
101
                <button class="uk-button uk-button-danger">Danger</button>
102
              </div>
103
              <div>
104
                <button class="uk-button uk-button-default" disabled="">Disabled</button>
105
              </div>
106
            </div>
107
            <div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid="">
108
              <div>
109
                <button class="uk-button uk-button-primary outlined">Outlined Primary</button>
110
              </div>
111
              <div>
112
                <button class="uk-button uk-button-secondary outlined">Outlined Secondary</button>
113
              </div>
114
            </div>
115
            <hr class="uk-margin-medium">
116

    
117
            <div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid="">
118
              <div class="uk-first-column">
119
                <ul class="uk-list">
120
                  <li><a href="#">a element</a></li>
121
                  <li><abbr title="Title text">abbr element</abbr></li>
122
                  <li><code>code element</code></li>
123
                  <li><del>del element</del></li>
124
                  <li><dfn title="Title text">dfn element</dfn></li>
125
                  <li><a href="#" class="uk-link-muted">Link Muted</a></li>
126
                </ul>
127
              </div>
128
              <div>
129
                <ul class="uk-list">
130
                  <li><em>em element</em></li>
131
                  <li><ins>ins element</ins></li>
132
                  <li><mark>mark element</mark></li>
133
                  <li><q>q <q>inside</q> a q</q></li>
134
                  <li><strong>strong element</strong></li>
135
                  <li><a href="#" class="uk-link-reset">Link Reset</a></li>
136
                </ul>
137
              </div>
138
              <div>
139
                <ul class="uk-list">
140
                  <li class="uk-text-muted">Text Muted</li>
141
                  <li class="uk-text-emphasis">Text Emphasis</li>
142
                  <li class="uk-text-primary">Text Primary</li>
143
                  <li class="uk-text-secondary">Text Secondary</li>
144
                  <li class="uk-text-success">Text Success</li>
145
                  <li class="uk-text-warning">Text Warning</li>
146
                  <li class="uk-text-danger">Text Danger</li>
147
                  <li class="uk-text-meta">Text Meta</li>
148
                </ul>
149
              </div>
150
              <div>
151
                <ul class="uk-list">
152
                  <li><span class="uk-label">Default</span></li>
153
                  <li><span class="uk-label uk-label-success">Success</span></li>
154
                  <li><span class="uk-label uk-label-warning">Warning</span></li>
155
                  <li><span class="uk-label uk-label-danger">Danger</span></li>
156
                  <li><a class="uk-badge" href="#">1</a></li>
157
                  <li>
158
                    <a class="uk-icon-button uk-icon uk-margin-small-right" href="#" uk-icon="icon: home"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="home"><polygon points="18.65 11.35 10 2.71 1.35 11.35 0.65 10.65 10 1.29 19.35 10.65"></polygon><polygon points="15 4 18 4 18 7 17 7 17 5 15 5"></polygon><polygon points="3 11 4 11 4 18 7 18 7 12 12 12 12 18 16 18 16 11 17 11 17 19 11 19 11 13 8 13 8 19 3 19"></polygon></svg></a>
159
                    <a class="uk-icon-button small uk-icon uk-margin-small-right" href="#" uk-icon="icon: github"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="github"><path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z"></path></svg></a>
160
                    <a class="uk-icon-link uk-icon" href="#" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></a>
161
                  </li>
162
                </ul>
163
              </div>
164
            </div>
165

    
166
            <pre class="uk-pre uk-margin-medium"><code>&lt;div class="myclass"&gt;...&lt;div&gt;</code></pre>
167

    
168
            <blockquote class="uk-margin-medium" cite="#">
169
              <p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
170
              <footer>Someone famous in <cite><a href="#">Source Title</a></cite></footer>
171
            </blockquote>
172

    
173
            <div class="uk-grid-small uk-grid" uk-grid="">
174
              <div class="uk-first-column">
175
                <a class="uk-button uk-button-text" href="#">Read more</a>
176
              </div>
177
              <div>
178
                <a class="uk-button uk-button-text" href="#">5 Comments</a>
179
              </div>
180
            </div>
181

    
182
          </article>
183

    
184
          <hr class="uk-margin-medium">
185

    
186
          <ul class="uk-comment-list uk-margin-medium">
187
            <li>
188
              <article class="uk-comment uk-visible-toggle" tabindex="-1">
189
                <header class="uk-comment-header uk-position-relative">
190
                  <div class="uk-grid-medium uk-flex-middle uk-grid" uk-grid="">
191
                    <div class="uk-width-auto uk-first-column">
192
                      <canvas class="uk-comment-avatar test-img-small" width="50" height="50"></canvas>
193
                    </div>
194
                    <div class="uk-width-expand">
195
                      <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
196
                      <p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">12 days ago</a></p>
197
                    </div>
198
                  </div>
199
                  <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-button uk-button-text" href="#">Reply</a></div>
200
                </header>
201
                <div class="uk-comment-body">
202
                  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
203
                </div>
204
              </article>
205
            </li>
206
          </ul>
207

    
208
          <ul class="uk-pagination uk-flex-center" uk-margin="">
209
            <li class="uk-first-column"><a href="#"><span uk-pagination-previous="" class="uk-icon uk-pagination-previous"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-previous"><polyline fill="none" stroke="#000" stroke-width="1.2" points="6 1 1 6 6 11"></polyline></svg></span></a></li>
210
            <li><a href="#">1</a></li>
211
            <li class="uk-disabled"><span>...</span></li>
212
            <li><a href="#">4</a></li>
213
            <li><a href="#">5</a></li>
214
            <li><a href="#">6</a></li>
215
            <li class="uk-active"><span>7</span></li>
216
            <li><a href="#">8</a></li>
217
            <li><a href="#">9</a></li>
218
            <li><a href="#">10</a></li>
219
            <li class="uk-disabled"><span>...</span></li>
220
            <li><a href="#">20</a></li>
221
            <li><a href="#"><span uk-pagination-next="" class="uk-icon uk-pagination-next"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-next"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 1 6 6 1 11"></polyline></svg></span></a></li>
222
          </ul>
223

    
224
        </div>
225
        <div class="uk-width-expand@m">
226

    
227
          <div class="uk-margin-medium-bottom">
228
            <form class="uk-search uk-search-default uk-width-1-1">
229
              <span uk-search-icon="" class="uk-icon uk-search-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
230
              <input class="uk-search-input" type="search" placeholder="Search...">
231
            </form>
232
          </div>
233

    
234
          <ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium uk-nav" uk-nav="">
235
            <li class="uk-active"><a href="#">Active</a></li>
236
            <li class="uk-parent">
237
              <a href="#">Parent</a>
238
              <ul class="uk-nav-sub" aria-hidden="true" hidden="">
239
                <li><a href="#">Sub item</a></li>
240
                <li><a href="#">Sub item</a>
241
                  <ul>
242
                    <li><a href="#">Sub item</a></li>
243
                    <li><a href="#">Sub item</a></li>
244
                  </ul>
245
                </li>
246
              </ul>
247
            </li>
248
            <li class="uk-parent">
249
              <a href="#">Parent</a>
250
              <ul class="uk-nav-sub" aria-hidden="true" hidden="">
251
                <li><a href="#">Sub item</a></li>
252
                <li><a href="#">Sub item</a></li>
253
              </ul>
254
            </li>
255
            <li class="uk-nav-header">Header</li>
256
            <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: table"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="table"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span> Item</a></li>
257
            <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: thumbnails"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="thumbnails"><rect fill="none" stroke="#000" x="3.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="3.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="11.5" y="11.5" width="5" height="5"></rect><rect fill="none" stroke="#000" x="3.5" y="11.5" width="5" height="5"></rect></svg></span> Item</a></li>
258
            <li class="uk-nav-divider"></li>
259
            <li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
260
          </ul>
261

    
262
          <div class="uk-card uk-card-body uk-card-default uk-card-hover">
263
            <h3 class="uk-card-title">Default</h3>
264
            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
265
          </div>
266

    
267
          <div class="uk-margin uk-card uk-card-body uk-card-primary uk-card-hover">
268
            <h3 class="uk-card-title">Primary</h3>
269
            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
270
          </div>
271

    
272
          <div class="uk-margin uk-card uk-card-body uk-card-secondary uk-card-hover">
273
            <h3 class="uk-card-title">Secondary</h3>
274
            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
275
          </div>
276

    
277
          <div class="uk-margin uk-card uk-card-body uk-card-hover">
278
            <h3 class="uk-card-title">Hover</h3>
279
            <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
280
          </div>
281

    
282
        </div>
283
      </div>
284

    
285
      <hr class="uk-margin-large">
286

    
287
      <div class="uk-grid-divider uk-grid" uk-grid="">
288
        <div class="uk-width-3-5@m uk-first-column">
289

    
290
          <div class="uk-child-width-expand@s uk-grid" uk-grid="">
291
            <div class="uk-first-column">
292

    
293
              <form class="uk-form-stacked">
294

    
295
                <div class="uk-margin-small">
296
                  <label class="uk-form-label">Text</label>
297
                  <input class="uk-input" type="text" placeholder="Some text...">
298
                </div>
299

    
300
                <div class="uk-margin-small">
301
                  <select class="uk-select">
302
                    <option>Option 01</option>
303
                    <option>Option 02</option>
304
                  </select>
305
                </div>
306

    
307
                <div class="uk-margin-small">
308
                  <textarea class="uk-textarea" rows="2" placeholder="Some text..."></textarea>
309
                </div>
310

    
311
                <div class="uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
312
                  <div class="uk-first-column">
313
                    <label><input class="uk-radio" type="radio" name="radio"> Radio</label>
314
                  </div>
315
                  <div>
316
                    <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
317
                  </div>
318
                </div>
319

    
320
                <div class="uk-margin-small">
321
                  <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
322
                </div>
323

    
324
              </form>
325

    
326
            </div>
327
            <div>
328

    
329
              <form class="uk-form-stacked">
330

    
331
                <div class="uk-margin-small">
332
                  <label class="uk-form-label">States</label>
333
                  <input class="uk-input" type="text" placeholder=":disabled" disabled="">
334
                </div>
335

    
336
                <div class="uk-margin-small">
337
                  <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
338
                </div>
339
                <div class="uk-margin-small">
340
                  <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
341
                </div>
342
                <div class="uk-margin-small">
343
                  <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
344
                </div>
345

    
346
              </form>
347

    
348
            </div>
349
          </div>
350

    
351
          <div class="uk-overflow-auto uk-margin-medium-top">
352
            <table class="uk-table uk-table-divider uk-table-hover uk-table-small">
353
              <thead>
354
              <tr>
355
                <th>Table Heading</th>
356
                <th>Table Heading</th>
357
                <th>Table Heading</th>
358
              </tr>
359
              </thead>
360
              <tbody>
361
              <tr>
362
                <td>Table Data</td>
363
                <td>Table Data</td>
364
                <td>Table Data</td>
365
              </tr>
366
              <tr>
367
                <td>Table Data</td>
368
                <td>Table Data</td>
369
                <td>Table Data</td>
370
              </tr>
371
              <tr>
372
                <td>Table Data</td>
373
                <td>Table Data</td>
374
                <td>Table Data</td>
375
              </tr>
376
              <tr>
377
                <td>Table Data</td>
378
                <td>Table Data</td>
379
                <td>Table Data</td>
380
              </tr>
381
              </tbody>
382
            </table>
383
          </div>
384

    
385
          <div class="uk-margin-medium-top uk-alert" uk-alert="">
386
            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
387
            <p>Default</p>
388
          </div>
389

    
390
          <div class="uk-alert-primary uk-alert" uk-alert="">
391
            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
392
            <p>Primary</p>
393
          </div>
394

    
395
          <div class="uk-alert-success uk-alert" uk-alert="">
396
            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
397
            <p>Success</p>
398
          </div>
399

    
400
          <div class="uk-alert-warning uk-alert" uk-alert="">
401
            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
402
            <p>Warning</p>
403
          </div>
404

    
405
          <div class="uk-alert-danger uk-margin-remove-bottom uk-alert" uk-alert="">
406
            <a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
407
            <p>Danger</p>
408
          </div>
409

    
410
          <div class="uk-grid-small uk-child-width-auto uk-margin-medium-top uk-countdown uk-grid" uk-grid="" js-countdown="">
411
            <div class="uk-first-column">
412
              <div class="uk-countdown-number uk-countdown-days"><span>0</span><span>6</span></div>
413
            </div>
414
            <div class="uk-countdown-separator">:</div>
415
            <div>
416
              <div class="uk-countdown-number uk-countdown-hours"><span>2</span><span>3</span></div>
417
            </div>
418
            <div class="uk-countdown-separator">:</div>
419
            <div>
420
              <div class="uk-countdown-number uk-countdown-minutes"><span>5</span><span>9</span></div>
421
            </div>
422
            <div class="uk-countdown-separator">:</div>
423
            <div>
424
              <div class="uk-countdown-number uk-countdown-seconds"><span>5</span><span>0</span></div>
425
            </div>
426
          </div>
427

    
428
          <script>
429

    
430
              var date = (new Date(Date.now() + 864e5 * 7)).toISOString();
431

    
432
              UIkit.util.$$('[js-countdown]').forEach(function(el) {
433
                  UIkit.countdown(el, {date: date});
434
              });
435

    
436
          </script>
437

    
438
        </div>
439
        <div class="uk-width-2-5@m">
440

    
441
          <h1 class="uk-heading-2xlarge uk-margin-small">2XL</h1>
442
          <h1 class="uk-heading-xlarge uk-margin-small">XLarge</h1>
443
          <h1 class="uk-heading-large uk-margin-small">Heading L</h1>
444
          <h1 class="uk-heading-medium uk-margin-small">Heading M</h1>
445
          <h1 class="uk-heading-small uk-margin-small">Heading S</h1>
446

    
447
          <h1 class="uk-margin-small">Heading H1</h1>
448
          <h2 class="uk-margin-small">Heading H2</h2>
449
          <h3 class="uk-margin-small">Heading H3</h3>
450
          <h4 class="uk-margin-small">Heading H4</h4>
451
          <h5 class="uk-margin-small">Heading H5</h5>
452
          <h6 class="uk-margin-small">Heading H6</h6>
453

    
454
          <h3 class="uk-heading-divider">Heading Divider</h3>
455
          <h3 class="uk-heading-bullet">Heading Bullet</h3>
456
          <h3 class="uk-heading-line"><span>Heading Line</span></h3>
457

    
458
        </div>
459
      </div>
460

    
461
      <hr class="uk-margin-medium">
462

    
463
      <div class="uk-child-width-1-2@s uk-child-width-expand@m uk-grid" uk-grid="">
464
        <div class="uk-first-column">
465

    
466
          <div class="uk-inline">
467
            <canvas width="800" height="600" class="test-img"></canvas>
468
            <a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 20%; top: 30%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a>
469
            <a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 60%; top: 40%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a>
470
            <a class="uk-position-absolute uk-transform-center uk-icon uk-marker" style="left: 80%; top: 70%" href="#" uk-marker=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg></a>
471
          </div>
472

    
473
        </div>
474
        <div>
475

    
476
          <div class="uk-inline-clip">
477
            <canvas width="800" height="600" class="test-img"></canvas>
478
            <div class="uk-overlay uk-overlay-default uk-position-bottom">
479
              <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
480
            </div>
481
          </div>
482

    
483
        </div>
484
        <div>
485

    
486
          <div class="uk-inline-clip">
487
            <canvas width="800" height="600" class="test-img"></canvas>
488
            <div class="uk-overlay uk-overlay-primary uk-position-bottom">
489
              <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
490
            </div>
491
          </div>
492

    
493
        </div>
494
        <div>
495

    
496
          <div class="uk-inline">
497
            <canvas width="800" height="600" class="test-img"></canvas>
498
            <div class="uk-position-center">
499
              <span uk-overlay-icon="" class="uk-icon uk-overlay-icon"><svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" data-svg="overlay-icon"><rect x="19" y="0" width="1" height="40"></rect><rect x="0" y="19" width="40" height="1"></rect></svg></span>
500
            </div>
501
          </div>
502

    
503
        </div>
504
      </div>
505

    
506
      <hr class="uk-margin-medium">
507

    
508
      <div class="uk-grid-divider uk-child-width-auto@m uk-grid" uk-grid="">
509
        <div class="uk-first-column">
510

    
511
          <ul class="uk-dotnav">
512
            <li class="uk-active"><a href="#">Item 1</a></li>
513
            <li><a href="#">Item 2</a></li>
514
            <li><a href="#">Item 3</a></li>
515
            <li><a href="#">Item 4</a></li>
516
            <li><a href="#">Item 5</a></li>
517
            <li><a href="#">Item 6</a></li>
518
          </ul>
519

    
520
        </div>
521
        <div>
522

    
523
          <a href="#" uk-slidenav-previous="" class="uk-icon uk-slidenav-previous uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-previous"><polyline fill="none" stroke="#000" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23 "></polyline></svg></a>
524
          <a href="#" uk-slidenav-next="" class="uk-icon uk-slidenav-next uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-next"><polyline fill="none" stroke="#000" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1 "></polyline></svg></a>
525

    
526
        </div>
527
        <div>
528

    
529
          <ul class="uk-thumbnav">
530
            <li class="uk-active"><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
531
            <li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
532
            <li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
533
          </ul>
534

    
535
        </div>
536
        <div>
537

    
538
          <div class="uk-tooltip uk-tooltip-top-center uk-display-inline-block uk-margin-remove uk-position-relative">Tooltip</div>
539

    
540
        </div>
541
        <div class="uk-width-expand@m">
542

    
543
          <progress class="uk-progress" value="45" max="100">45%</progress>
544

    
545
        </div>
546
        <div>
547

    
548
          <button type="button" uk-close="" class="uk-icon uk-close"><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button>
549

    
550
        </div>
551
        <div>
552

    
553
          <a href="#" uk-totop="" class="uk-icon uk-totop"><svg width="18" height="10" viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" data-svg="totop"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 9 9 1 17 9 "></polyline></svg></a>
554

    
555
        </div>
556
      </div>
557

    
558
      <hr class="uk-margin-medium">
559

    
560
      <div class="uk-grid-divider uk-child-width-expand@m uk-grid" uk-grid="">
561
        <div class="uk-first-column">
562

    
563
          <ul class="uk-subnav uk-subnav-divider" uk-margin="">
564
            <li class="uk-active uk-first-column"><a href="#">Active</a></li>
565
            <li><a href="#">Item</a></li>
566
            <li class="uk-disabled"><a>Disabled</a></li>
567
          </ul>
568

    
569
        </div>
570
        <div>
571

    
572
          <ul class="uk-subnav uk-subnav-pill" uk-margin="">
573
            <li class="uk-active uk-first-column"><a href="#">Active</a></li>
574
            <li><a href="#">Item</a></li>
575
            <li class="uk-disabled"><a>Disabled</a></li>
576
          </ul>
577

    
578
        </div>
579
        <div>
580

    
581
          <ul uk-tab="" class="uk-tab">
582
            <li class="uk-active"><a href="#">Active</a></li>
583
            <li><a href="#">Item</a></li>
584
            <li class="uk-disabled"><a>Disabled</a></li>
585
          </ul>
586

    
587
        </div>
588
      </div>
589

    
590
      <hr class="uk-margin-medium">
591

    
592
      <div class="uk-grid-divider uk-child-width-expand@m uk-grid" uk-grid="">
593
        <div class="uk-first-column">
594

    
595
          <ul class="uk-list uk-list-bullet uk-margin-medium">
596
            <li>List item 1</li>
597
            <li>List item 2</li>
598
            <li>List item 3</li>
599
          </ul>
600

    
601
          <ul class="uk-list uk-list-striped">
602
            <li>List item 1</li>
603
            <li>List item 2</li>
604
            <li>List item 3</li>
605
          </ul>
606

    
607
        </div>
608
        <div>
609

    
610
          <ul class="uk-list uk-list-divider uk-margin-medium">
611
            <li>List item 1</li>
612
            <li>List item 2</li>
613
            <li>List item 3</li>
614
          </ul>
615

    
616
          <dl class="uk-description-list uk-description-list-divider">
617
            <dt>Description lists</dt>
618
            <dd>A description text</dd>
619
            <dt>Description lists</dt>
620
            <dd>A description text</dd>
621
          </dl>
622

    
623
        </div>
624
        <div>
625

    
626
          <ul uk-accordion="" class="uk-accordion">
627
            <li class="uk-open">
628

    
629
              <a class="uk-accordion-title" href="#">Item 1</a>
630
              <div class="uk-accordion-content" aria-hidden="false">
631
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
632
              </div>
633

    
634
            </li>
635
            <li>
636

    
637
              <a class="uk-accordion-title" href="#">Item 2</a>
638
              <div class="uk-accordion-content" aria-hidden="true" hidden="">
639
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
640
              </div>
641

    
642
            </li>
643
            <li>
644

    
645
              <a class="uk-accordion-title" href="#">Item 3</a>
646
              <div class="uk-accordion-content" aria-hidden="true" hidden="">
647
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
648
              </div>
649

    
650
            </li>
651
          </ul>
652

    
653
        </div>
654
      </div>
655

    
656
    </div>
657
  </div>
658

    
659
  <div class="uk-section uk-padding-remove-vertical">
660
    <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match uk-grid" uk-grid="">
661
      <div class="uk-first-column">
662
        <div class="uk-tile uk-tile-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
663
      </div>
664
      <div>
665
        <div class="uk-tile uk-tile-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
666
      </div>
667
      <div>
668
        <div class="uk-tile uk-tile-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
669
      </div>
670
      <div>
671
        <div class="uk-tile uk-tile-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</div>
672
      </div>
673
    </div>
674
  </div>
675

    
676
  <div class="uk-section uk-section-default">
677
    <div class="uk-container">
678

    
679
      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
680
        <div class="uk-width-expand@m uk-first-column">
681
          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
682
        </div>
683
        <div class="uk-width-auto@m">
684
          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
685
        </div>
686
      </div>
687

    
688
    </div>
689
  </div>
690

    
691
  <div class="uk-section uk-section-muted">
692
    <div class="uk-container">
693

    
694
      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
695
        <div class="uk-width-expand@m uk-first-column">
696
          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
697
        </div>
698
        <div class="uk-width-auto@m">
699
          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
700
        </div>
701
      </div>
702

    
703
    </div>
704
  </div>
705

    
706
  <div class="uk-section uk-section-primary">
707
    <div class="uk-container">
708

    
709
      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
710
        <div class="uk-width-expand@m uk-first-column">
711
          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
712
        </div>
713
        <div class="uk-width-auto@m">
714
          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
715
        </div>
716
      </div>
717

    
718
    </div>
719
  </div>
720

    
721
  <div class="uk-section uk-section-secondary">
722
    <div class="uk-container">
723

    
724
      <div class="uk-grid-large uk-flex-middle uk-grid" uk-grid="">
725
        <div class="uk-width-expand@m uk-first-column">
726
          <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
727
        </div>
728
        <div class="uk-width-auto@m">
729
          <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
730
        </div>
731
      </div>
732

    
733
    </div>
734
  </div>
735

    
736
  <div id="modal" uk-modal="" class="uk-modal">
737
    <div class="uk-modal-dialog">
738
      <button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button>
739
      <div class="uk-modal-header">
740
        <h2 class="uk-modal-title">Headline</h2>
741
      </div>
742
      <div class="uk-modal-body">
743
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
744
      </div>
745
      <div class="uk-modal-footer uk-text-right">
746
        <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
747
        <button class="uk-button uk-button-primary" type="button">Save</button>
748
      </div>
749
    </div>
750
  </div>
751

    
752
  <div id="modal-search" class="uk-modal-full uk-modal" uk-modal="">
753
    <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport="">
754

    
755
      <button class="uk-modal-close-full uk-close-large uk-icon uk-close" type="button" uk-close=""><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close-large"><line fill="none" stroke="#000" stroke-width="1.4" x1="1" y1="1" x2="19" y2="19"></line><line fill="none" stroke="#000" stroke-width="1.4" x1="19" y1="1" x2="1" y2="19"></line></svg></button>
756

    
757
      <div>
758

    
759
        <ul class="uk-nav-primary uk-nav-center uk-nav" uk-nav="">
760
          <li class="uk-active"><a href="#">Active</a></li>
761
          <li><a href="#">Item</a></li>
762
          <li><a href="#">Item</a></li>
763
          <li><a href="#">Item</a></li>
764
        </ul>
765

    
766
        <div class="uk-margin">
767
          <form class="uk-search uk-search-large">
768
            <input class="uk-search-input uk-text-center" type="search" placeholder="Search...">
769
          </form>
770
        </div>
771

    
772
      </div>
773

    
774
    </div>
775
  </div>
776

    
777
</div>
778
<div class="uk-container ">
779
  <button class="uk-button portal-button">Button</button>
780
  <div class="portal-color">portal-color</div>
781
  <div class="portal-secondary-color">portal-secondary-color</div>
782
  <div class="portal-background-color">portal-background-color</div>
783
  <a class="uk-link portal-link">portal-link</a>
784
  <div class="portal-box">portal-box</div>
785
  <div><span class="portal-icon-button uk-icon uk-icon-button" uk-icon="icon: check"></span> portal-icon-button
786
    uk-icon-button uk-icon</div>
787

    
788
</div>
789
<div class="uk-container uk-container-small portal-box">
790
  <div class=" uk-text-large">small container</div>
791

    
792

    
793
</div>
794
<div class="uk-container   portal-box">
795
  <div class=" uk-text-large">large container</div>
796

    
797

    
798
</div>
799
<div class="uk-container uk-container-large portal-box">
800
  <div class=" uk-text-large">large container</div>
801

    
802

    
803
</div>
804

    
805
.
(2-2/4)