Utility

Panel

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.

Panel Scrollable

Overflow Auto

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data

Pre scrollable

<div uk-grid>
    <div class="uk-width-1-2">...</div><div class="uk-width-1-2">...</div><div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

Responsive Objects

Responsive Width (Video)

JS Responsive Width (Iframe)

Responsive Height (Image)

Box-shadows

Small
Medium
Large
XLarge

Drop Cap

Dorem 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

Logo

Image

+ Inverse Image

Inline SVG

Image

Width

Symbol + ID

Symbol + ID + Fallback

Option Value Default Description
src String undefined The SVG source url. If a location hash is present, only the part of the SVG with the given ID is shown.

Gif

Height Match

Each Row

1-2-M
...
...
1-2-M
1-2-M
...
1-2-M

All Rows

1-2-M
...
...
1-2-M
1-2-M
...
1-2-M

Hidden Panels

1-2-M
...
Option Value Default Description
target CSS selector false Elements that should match. By default the children will match.
row Boolean true If your targets wrap into multiple rows, only grid columns within the same row are matched.