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

JS Responsive Width (Iframe)

Responsive Height (Image)

Box-shadows

Hover
Small
Medium
Large
XLarge

Box-shadow Bottom

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.

Leader

Lorem ipsum dolor
Price
Lorem ipsum dolor sit amet
Price
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
Price
The leader dots are hidden before @l
Price
Option Value Default Description
fill String undefined Optional fill character.
media String false Condition for the space filling - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).

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

Video

Option Value Default Description
autoplay Boolean true Automatically start the video. Pauses the video if it is not visible.
automute Boolean false Automatically mute the video.

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 > * Elements that should match. By default the children will match.
row Boolean true By default only items in the same row will be matched. For example, once grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.