Released Installed
Add these to your <head> and before </body>. Use Server for absolute URLs, or Local for relative paths.
<!-- CSS in <head> -->
<link rel="stylesheet" href="https://cdn.roste.org/uikit/latest/css/uikit.min.css" />
<!-- JavaScript before </body> -->
<script src="https://cdn.roste.org/uikit/latest/js/uikit.min.js"></script>
<script src="https://cdn.roste.org/uikit/latest/js/uikit-icons.min.js"></script><!-- CSS in <head> -->
<link rel="stylesheet" href="https://cdn.roste.org/uikit/latest/css/uikit.min.css" />
<!-- JavaScript before </body> -->
<script src="https://cdn.roste.org/uikit/latest/js/uikit.min.js"></script>
<script src="https://cdn.roste.org/uikit/latest/js/uikit-icons.min.js"></script><!-- CSS in <head> -->
<link rel="stylesheet" href="latest/css/uikit.min.css" />
<!-- JavaScript before </body> -->
<script src="latest/js/uikit.min.js"></script>
<script src="latest/js/uikit-icons.min.js"></script>Use the version selector above to switch between installed UIkit versions. The page reloads with the selected version's assets.
Lead paragraph with larger text for emphasis.
Regular body text with link, bold, italic, and inline code.
Muted text
Primary colored text
Success colored text
Warning colored text
Danger colored text
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<h1 class="uk-h1">Heading 1</h1>
<h2 class="uk-h2">Heading 2</h2>
<h3 class="uk-h3">Heading 3</h3>
<p class="uk-text-lead">Lead paragraph with larger text for emphasis.</p>
<p>Regular body text with <a href="#">link</a>, <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
</div>
<div>
<p class="uk-text-muted">Muted text</p>
<p class="uk-text-primary">Primary colored text</p>
<p class="uk-text-success">Success colored text</p>
<p class="uk-text-warning">Warning colored text</p>
<p class="uk-text-danger">Danger colored text</p>
<ul class="uk-list uk-list-bullet">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>Card body content with default styling.
Card body with primary background.
Media top, body below.
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>Primary alert — click X to close.</p>
</div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Default Card</h3>
<p>Card body content with default styling.</p>
</div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<div class="uk-background-muted uk-height-small uk-flex uk-flex-center uk-flex-middle">Media</div>
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Card with Media</h3>
<p>Media top, body below.</p>
</div>
</div><form class="uk-form-stacked uk-width-1-2@m">
<div class="uk-margin">
<label class="uk-form-label" for="form-input">Text input</label>
<div class="uk-form-controls">
<input class="uk-input" id="form-input" type="text" placeholder="Placeholder text" />
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-select">Select</label>
<div class="uk-form-controls">
<select class="uk-select" id="form-select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
<div class="uk-margin">
<label><input class="uk-checkbox" type="checkbox" /> Checkbox</label>
<label><input class="uk-radio" type="radio" name="r" /> Radio 1</label>
<label><input class="uk-radio" type="radio" name="r" /> Radio 2</label>
</div>
<div class="uk-margin">
<textarea class="uk-textarea" rows="3" placeholder="Textarea"></textarea>
</div>
</form>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.
<ul class="uk-accordion-default" uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 2</a>
<div class="uk-accordion-content">
<p>Ut enim ad minim veniam...</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 3</a>
<div class="uk-accordion-content">
<p>Duis aute irure dolor...</p>
</div>
</li>
</ul><div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Click</button>
<div uk-dropdown="mode: click">Dropdown content shown on click.</div>
</div>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Dropdown with menu <span uk-icon="icon: triangle-down"></span></button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>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.
<button type="button" uk-toggle="target: #modal-demo">Open Modal</button>
<div id="modal-demo" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<h2 class="uk-modal-title">Modal Title</h2>
<p>Lorem ipsum dolor sit amet...</p>
<p class="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>
</p>
</div>
</div><ul uk-tab>
<li class="uk-active"><a href="#">Left</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Content for the first tab.</li>
<li>Content for the second tab.</li>
<li>Content for the third tab.</li>
</ul>
<button type="button" onclick="UIkit.notification({message: 'Default notification'})">Default</button>
<button type="button" onclick="UIkit.notification({message: 'Success', status: 'success'})">Success</button>
<button type="button" onclick="UIkit.notification.closeAll()">Close all</button>
<!-- Or via JavaScript -->
<script>
UIkit.notification({ message: 'My message', status: 'primary' });
UIkit.notification('Short message');
</script><div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-grid">
<li><div class="uk-background-primary uk-padding uk-height-medium uk-flex uk-flex-center uk-flex-middle">Slide 1</div></li>
<li><div class="uk-background-secondary uk-padding uk-height-medium uk-flex uk-flex-center uk-flex-middle">Slide 2</div></li>
<li><div class="uk-background-muted uk-padding uk-height-medium uk-flex uk-flex-center uk-flex-middle">Slide 3</div></li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
<button class="uk-button uk-button-default" uk-tooltip="Tooltip on top">Top</button>
<button class="uk-button uk-button-default" uk-tooltip="title: Tooltip bottom; pos: bottom">Bottom</button>
<button class="uk-button uk-button-default" uk-tooltip="title: Tooltip left; pos: left">Left</button>
<button class="uk-button uk-button-default" uk-tooltip="title: Tooltip right; pos: right">Right</button><progress class="uk-progress" value="70" max="100"></progress>
<progress class="uk-progress uk-progress-success" value="90" max="100"></progress><button type="button" uk-toggle="target: #offcanvas-demo">Open Off-canvas</button>
<div id="offcanvas-demo" uk-offcanvas="overlay: true">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<h3>Title</h3>
<p>Sidebar content...</p>
</div>
</div>| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
<div class="uk-grid uk-child-width-1-4@m uk-text-center" uk-grid>
<div><div class="uk-background-muted uk-padding">1/4</div></div>
<div><div class="uk-background-muted uk-padding">1/4</div></div>
<div><div class="uk-background-muted uk-padding">1/4</div></div>
<div><div class="uk-background-muted uk-padding">1/4</div></div>
</div>
<table class="uk-table uk-table-striped uk-table-hover uk-table-small">
<thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead>
<tbody>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</tbody>
</table>