<nav class="uk-navbar-container uk-visible@s">
    <div class="uk-container">
        <div uk-navbar>

            <div class="test-overlay uk-navbar-left">

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

                <ul class="uk-navbar-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li>
                        <a href="#">Parent</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li class="uk-active"><a href="#">Active</a></li>
                                 <li class="uk-parent">
                                    <a href="#">Parent</a>
                                    <ul class="uk-nav-sub">
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                                <li class="uk-nav-header">Header</li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                <li class="uk-nav-divider"></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>

            </div>

            <div class="test-overlay uk-navbar-right">

                <a class="uk-navbar-toggle" href="#modal" uk-icon="icon: more-vertical" uk-toggle></a>

                <a class="uk-navbar-toggle" href="#offcanvas" uk-navbar-toggle-icon uk-toggle></a>

                <a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>

            </div>

            <div class="uk-navbar-left uk-flex-1 test-overlay" hidden>

                <div class="uk-navbar-item uk-width-1-1">
                    <form class="uk-search uk-search-navbar uk-width-1-1">
                        <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
                    </form>
                </div>

                <a class="uk-navbar-toggle" uk-close uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>

            </div>

        </div>
    </div>

</nav>

<nav id="navbar-toggle-1" class="uk-navbar uk-navbar-container uk-hidden@s">
    <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
    </div>
    <div class="uk-navbar-right">
        <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
    </div>
</nav>

<div class="uk-section uk-section-small">
    <div class="uk-container">

        <div class="uk-child-width-expand@m" uk-grid>
            <div>
                <button class="uk-button uk-button-default uk-width-1-1">Default</button>
            </div>
            <div>
                <button class="uk-button uk-button-primary uk-width-1-1">Primary</button>
            </div>
            <div>
                <button class="uk-button uk-button-secondary uk-width-1-1">Secondary</button>
            </div>
            <div>
                <button class="uk-button uk-button-danger uk-width-1-1">Danger</button>
            </div>
            <div>

                <div class="uk-button-group">
                    <button class="uk-button uk-button-default">Group</button>
                    <div class="uk-inline">
                        <button class="uk-button uk-button-default"><span uk-icon="icon: table"></span></button>
                        <div uk-dropdown="mode: click">
                            <ul class="uk-nav uk-dropdown-nav">
                                <li class="uk-active"><a href="#">Active</a></li>
                                <li class="uk-parent">
                                    <a href="#">Parent</a>
                                    <ul class="uk-nav-sub">
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                                <li class="uk-nav-header">Header</li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                <li class="uk-nav-divider"></li>
                                <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
            <div>
                <button class="uk-button uk-button-default" disabled>Disabled</button>
            </div>
            <div>
                <a class="uk-icon-button" href="#" uk-icon="icon: github"></a>
                <a class="uk-icon-link" href="#" uk-icon="icon: github"></a>
            </div>

        </div>

        <hr class="uk-margin-large-bottom">

        <div uk-grid class="uk-grid">

            <div class="uk-width-2-3@m uk-first-column">
                <div>

                    <ul class="uk-breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li class="uk-disabled"><a href="#">Category</a></li>
                        <li><span>Post</span></li>
                    </ul>

                    <article class="uk-article">

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

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

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

                        <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>

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

                        <p>
                            <span class="uk-label">Default</span>
                            <span class="uk-label uk-label-success">Success</span>
                            <span class="uk-label uk-label-warning">Warning</span>
                            <span class="uk-label uk-label-danger">Danger</span>
                            <a class="uk-badge" href="#">1</a>
                        </p>

                        <hr>

                        <div class="uk-child-width-1-3@m uk-margin-large-bottom" uk-grid>
                            <div>
                                <ul class="uk-list">
                                    <li><a href="#">a element</a></li>
                                    <li><abbr title="Title text">abbr element</abbr></li>
                                    <li><code>code element</code></li>
                                    <li><del>del element</del></li>
                                    <li><dfn title="Title text">dfn element</dfn></li>
                                    <li><a href="" class="uk-link-muted">Link Muted</a></li>
                                </ul>
                            </div>
                            <div>
                                <ul class="uk-list">
                                    <li><em>em element</em></li>
                                    <li><ins>ins element</ins></li>
                                    <li><mark>mark element</mark></li>
                                    <li><q>q <q>inside</q> a q</q></li>
                                    <li><strong>strong element</strong></li>
                                    <li><a href="" class="uk-link-reset">Link Reset</a></li>
                                </ul>
                            </div>
                            <div>
                                <ul class="uk-list">
                                    <li class="uk-text-muted">Text Muted</li>
                                    <li class="uk-text-primary">Text Primary</li>
                                    <li class="uk-text-success">Text Success</li>
                                    <li class="uk-text-warning">Text Warning</li>
                                    <li class="uk-text-danger">Text Danger</li>
                                    <li class="uk-text-meta">Text Meta</li>
                                </ul>
                            </div>
                        </div>

                        <hr class="uk-divider-icon uk-margin-large">

                        <blockquote class="uk-margin-large" cite="#">
                            <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>
                            <footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
                        </blockquote>

                        <div class="uk-grid-small" uk-grid>
                            <div>
                                <a class="uk-button uk-button-text" href="#">Read more</a>
                            </div>
                            <div>
                                <a class="uk-button uk-button-text" href="#">5 Comments</a>
                            </div>
                        </div>

                    </article>

                    <ul class="uk-comment-list uk-margin-large">
                        <li>
                            <article class="uk-comment uk-visible-toggle">
                                <header class="uk-comment-header uk-position-relative">
                                    <div class="uk-grid-medium uk-flex-middle" uk-grid>
                                        <div class="uk-width-auto">
                                            <canvas width="50" height="50" class="test-img"></canvas>
                                        </div>
                                        <div class="uk-width-expand">
                                            <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
                                            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                                                <li class="uk-disabled"><a href="#">12 days ago</a></li>
                                                <li><a href="#">Profile</a></li>
                                                <li><a href="#">#</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Reply</a></div>
                                </header>
                                <div class="uk-comment-body">
                                    <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>
                                </div>
                            </article>
                        </li>
                    </ul>

                    <ul class="uk-pagination uk-flex-center" uk-margin>
                        <li><a href="#"><span uk-pagination-previous></span></a></li>
                        <li><a href="#">1</a></li>
                        <li class="uk-disabled"><span>...</span></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li class="uk-active"><span>7</span></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li><a href="#">10</a></li>
                        <li class="uk-disabled"><span>...</span></li>
                        <li><a href="#">20</a></li>
                        <li><a href="#"><span uk-pagination-next></span></a></li>
                    </ul>

                </div>
            </div>

            <div class="uk-width-expand@m">
                <div>

                    <div class="uk-margin">
                        <form class="uk-search uk-search-default uk-width-1-1">
                            <span uk-search-icon></span>
                            <input class="uk-search-input" type="search" placeholder="Search...">
                        </form>
                    </div>

                    <div class="uk-margin-large-top uk-card uk-card-body uk-card-default uk-card-hover">
                        <h3 class="uk-card-title">Default</h3>
                        <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur.</p>
                    </div>

                    <div class="uk-margin uk-card uk-card-body uk-card-primary uk-card-hover">
                        <h3 class="uk-card-title">Primary</h3>
                        <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur.</p>
                    </div>

                    <div class="uk-margin uk-card uk-card-body uk-card-secondary uk-card-hover">
                        <h3 class="uk-card-title">Secondary</h3>
                        <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur.</p>
                    </div>

                    <ul class="uk-margin-large-top uk-nav-default uk-nav-parent-icon" uk-nav>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a>
                                    <ul>
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>
                        <li class="uk-nav-header">Header</li>
                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                    </ul>

                    <div class="uk-margin-large-top">

                        <div uk-alert>
                            <a href="#" class="uk-alert-close" uk-close></a>
                            <p>Default</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-alert-primary" uk-alert>
                            <a href="#" class="uk-alert-close" uk-close></a>
                            <p>Primary</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-alert-success" uk-alert>
                            <a href="#" class="uk-alert-close" uk-close></a>
                            <p>Success</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-alert-warning" uk-alert>
                            <a href="#" class="uk-alert-close" uk-close></a>
                            <p>Warning</p>
                        </div>

                    </div>
                    <div>

                        <div class="uk-alert-danger uk-margin-remove-bottom" uk-alert>
                            <a href="#" class="uk-alert-close" uk-close></a>
                            <p>Danger</p>
                        </div>

                    </div>

                </div>
            </div>

        </div>

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

        <div class="uk-child-width-expand@m" uk-grid>
            <div>
                <div class="uk-inline">
                    <canvas width="800" height="500" class="test-img"></canvas>
                    <div class="uk-position-center">
                        <span uk-overlay-icon></span>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-inline-clip">
                    <canvas width="800" height="500" class="test-img"></canvas>
                    <div class="uk-overlay uk-overlay-default uk-position-bottom uk-padding-small">
                        <p>Default Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="uk-position-top-right uk-position-small uk-light">
                        <a href="#" uk-slidenav="previous"></a>
                        <a href="#" uk-slidenav="next"></a>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-inline-clip">
                    <canvas width="800" height="500" class="test-img"></canvas>
                    <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
                        <p>Primary Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="uk-position-top-right uk-position-small uk-light">
                        <a class="uk-slidenav-large" href="#" uk-slidenav="previous"></a>
                        <a class="uk-slidenav-large" href="#" uk-slidenav="next"></a>
                    </div>
                </div>
            </div>
        </div>

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

        <div class="uk-grid-divider uk-child-width-expand@m" uk-grid>

            <div>

                <div class="uk-child-width-expand@m" uk-grid>
                    <div>

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

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

                            <div class="uk-margin-small">
                                <select class="uk-select">
                                    <option>Option 01</option>
                                    <option>Option 02</option>
                                </select>
                            </div>

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

                            <div class="uk-grid-small uk-child-width-auto" uk-grid>
                                <div>
                                    <label><input class="uk-radio" type="radio" name="radio"> Radio</label>
                                </div>
                                <div>
                                    <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
                                </div>
                            </div>

                        </form>

                    </div>
                    <div>

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

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

                            <div class="uk-margin-small">
                                <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
                            </div>
                            <div class="uk-margin-small">
                                <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
                            </div>
                            <div class="uk-margin-small">
                                <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
                            </div>

                        </form>

                    </div>
                </div>

                <div class="uk-overflow-auto uk-margin-large-top">
                    <table class="uk-table uk-table-hover uk-table-small">
                        <thead>
                            <tr>
                                <th>Table Heading</th>
                                <th>Table Heading</th>
                                <th>Table Heading</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Table Data</td>
                                <td>Table Data</td>
                                <td>Table Data</td>
                            </tr>
                            <tr>
                                <td>Table Data</td>
                                <td>Table Data</td>
                                <td>Table Data</td>
                            </tr>
                            <tr>
                                <td>Table Data</td>
                                <td>Table Data</td>
                                <td>Table Data</td>
                            </tr>
                            <tr>
                                <td>Table Data</td>
                                <td>Table Data</td>
                                <td>Table Data</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>

            <div>

                <h1 class="uk-heading-primary">Primary Heading</h1>

                <h1 class="uk-margin-small">H1 heading</h1>
                <h2 class="uk-margin-small">H2 heading</h2>
                <h3 class="uk-margin-small">H3 heading</h3>
                <h4 class="uk-margin-small">H4 heading</h4>
                <h5 class="uk-margin-small">H5 heading</h5>
                <h6 class="uk-margin-small">H6 heading</h6>

                <h3 class="uk-heading-divider">Heading divider</h3>
                <h3 class="uk-heading-bullet">Heading bullet</h3>
                <h3 class="uk-heading-line"><span>Heading line</span></h3>

            </div>

        </div>

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

        <div class="uk-grid-divider uk-child-width-expand@m" uk-grid>
            <div>
                <ul class="uk-subnav uk-subnav-divider" uk-margin>
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-disabled"><a href="#">Disabled</a></li>
                </ul>
            </div>
            <div>
                <ul class="uk-subnav uk-subnav-pill" uk-margin>
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-disabled"><a href="#">Disabled</a></li>
                </ul>
            </div>
            <div>
                <ul uk-tab>
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-disabled"><a href="#">Disabled</a></li>
                </ul>
            </div>
        </div>



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

        <div class="uk-grid-divider uk-child-width-expand@m" uk-grid>
            <div>

                <ul class="uk-list uk-list-bullet">
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                 </ul>

            </div>
            <div>

                <ul class="uk-list uk-list-divider">
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>

            </div>
            <div>

                <ul class="uk-list uk-list-striped">
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>

            </div>
            <div>

                <dl class="uk-description-list uk-description-list-divider">
                    <dt>Description lists</dt>
                    <dd>A description text</dd>
                    <dt>Description lists</dt>
                    <dd>A description text</dd>
                </dl>

            </div>

        </div>

    </div>
</div>

<hr class="uk-margin-large-top uk-margin-remove-bottom">

<div class="uk-section uk-section-default uk-section-small">
    <div class="uk-container">

        <div class="uk-grid-large" uk-grid>
            <div class="uk-width-expand@m">
                <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div class="uk-width-auto@m">
                <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
            </div>
        </div>

    </div>
</div>

<div class="uk-section uk-section-muted uk-section-small">
    <div class="uk-container">

        <div class="uk-grid-large" uk-grid>
            <div class="uk-width-expand@m">
                <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div class="uk-width-auto@m">
                <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
            </div>
        </div>

    </div>
</div>

<div class="uk-section uk-section-primary uk-light uk-section-small">
    <div class="uk-container">

        <div class="uk-grid-large" uk-grid>
            <div class="uk-width-expand@m">
                <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div class="uk-width-auto@m">
                <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
            </div>
        </div>

    </div>
</div>

<div class="uk-section uk-section-secondary uk-light uk-section-small uk-position-relative">
    <div class="uk-container">

        <div class="uk-grid-large" uk-grid>
            <div class="uk-width-expand@m">
                <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div class="uk-width-auto@m">
                <a class="uk-button uk-button-default uk-button-large" href="#">Button</a>
            </div>
        </div>

    </div>
    <a class="uk-position-bottom-right uk-margin-medium-bottom uk-margin-medium-right" href="#" uk-totop></a>
</div>

<ul class="uk-dotnav uk-dotnav-vertical uk-position-medium uk-position-center-right uk-position-fixed uk-visible@xl">
    <li class="uk-active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
</ul>

<div id="modal" uk-modal>
    <div class="uk-modal-dialog">

        <button class="uk-modal-close-default" type="button" uk-close></button>

        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Modal Title</h2>
        </div>

        <div class="uk-modal-body uk-text-center uk-padding-large">

            <div class="uk-width-medium uk-margin-auto uk-margin-medium">

                <h3>Nav Primary</h3>

                <ul class="uk-nav-primary uk-nav-parent-icon uk-nav-center" uk-nav>
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li class="uk-parent">
                        <a href="#">Parent</a>
                        <ul class="uk-nav-sub">
                            <li><a href="#">Sub item</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li class="uk-nav-header">Header</li>
                    <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                </ul>

            </div>

            <form class="uk-search uk-search-large uk-margin-auto">
                <input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
            </form>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </div>

        <div class="uk-modal-caption">Caption</div>

    </div>
</div>

<div id="offcanvas" uk-offcanvas="flip: true; overlay: true">
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#">Active</a></li>
            <li class="uk-parent">
                <a href="#">Parent</a>
                <ul class="uk-nav-sub">
                    <li><a href="#">Sub item</a></li>
                    <li><a href="#">Sub item</a></li>
                </ul>
            </li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
        </ul>

        <button class="uk-button uk-button-default uk-offcanvas-close uk-width-1-1 uk-margin">Close</button>

        <h3>Title</h3>

        <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.</p>

    </div>
</div>
