-
Button
Easily create nice looking .buttons, which come in different styles
Size
Button Colors
There are several style modifiers available. Just add one of the following classes to apply a different look.
.btn-warning
.btn-secondary
.btn-danger
.btn-success
.btn-info
.btn-dark
.btn-dark
.btn-white
.btn-light
Outline Button
Soft color
Button transition 3d hover
Button Social
Button with icon
Button with icon animation
Apps
Button Icon
Button States
-
Card
Create layout boxes with different styles.
Usage :
By default, a card is blank. That is why it is important to add a modifier class for styling. In our example we are using the
.uk-card-default
class.PREVIEW
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m"> <h3 class="uk-card-title">Default</h3> <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
Style modifiers
UIkit includes a number of modifiers that can be used to add a specific style to cards.
.uk-card-default
.uk-card-primary
.uk-card-secondary
or you can use Background compounents . and.uk-light
PREVIEW
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Secondary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body"> <h4 class="uk-card-title">Default</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-primary uk-card-body"> <h4 class="uk-card-title">Primary</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-secondary uk-card-body"> <h4 class="uk-card-title">Secondary</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card-default uk-card-body bg-danger uk-light"> <h5> Default </h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card-default uk-card-body bg-warning uk-light"> <h5> Default </h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card-default uk-card-body bg-info uk-light"> <h5> Default </h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div>
Hover modifier
To create a hover effect on the card, add the
.uk-card-hover
class. This comes in handy when working with anchors and can be combined with the other card modifiers.PREVIEW
Hover
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Secondary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="uk-child-width-1-2@s uk-grid-match" uk-grid> <div> <div class="uk-card uk-card-hover uk-card-body"> <h3 class="uk-card-title">Hover</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-hover uk-card-body"> <h3 class="uk-card-title">Default</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-primary uk-card-hover uk-card-body uk-light"> <h3 class="uk-card-title">Primary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-light"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div>
Size modifier
You can apply different size modifiers to cards that will decrease or increase their padding.
PREVIEW
Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-child-width-1-2@s" uk-grid> <div> <div class="uk-card uk-card-default uk-card-small uk-card-body"> <h3 class="uk-card-title">Small</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-large uk-card-body"> <h3 class="uk-card-title">Large</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div>
Header & footer
You can also divide a card into header and footer — around the default body. Just add the
.uk-card-header
or.uk-card-footer
class to a<div>
element inside the card.PREVIEW
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
<div class="uk-card uk-card-default uk-width-1-2@m"> <div class="uk-card-header"> <div class="uk-grid-small uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img class="uk-border-circle" width="40" height="40" src="images/avatar.jpg"> </div> <div class="uk-width-expand"> <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3> <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p> </div> </div> </div> <div class="uk-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> <div class="uk-card-footer"> <a href="#" class="uk-uk-button uk-button-text">Read more</a> </div> </div>
Media modifiers.
To display an image inside a card without any spacing, add one of the following classes to a
<div>
around the<img>
element. Mind that you need to modify the source order accordingly.PREVIEW
Media Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Media Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
<div class="uk-child-width-1-2@m" uk-grid> <div> <div class="uk-card uk-card-default"> <div class="uk-card-media-top"> <img src="images/light.jpg" alt=""> </div> <div class="uk-card-body"> <h3 class="uk-card-title">Media Top</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-body"> <h3 class="uk-card-title">Media Bottom</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> <div class="uk-card-media-bottom"> <img src="images/light.jpg" alt=""> </div> </div> </div> </div>
Horizontal alignment
PREVIEW
Media Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Media Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid> <div class="uk-card-media-left uk-cover-container"> <img src="images/light.jpg" alt="" uk-cover> <canvas width="600" height="400"></canvas> </div> <div> <div class="uk-card-body"> <h3 class="uk-card-title">Media Left</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> </div> </div> <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid> <div class="uk-flex-last@s uk-card-media-right uk-cover-container"> <img src="images/light.jpg" alt="" uk-cover> <canvas width="600" height="400"></canvas> </div> <div> <div class="uk-card-body"> <h3 class="uk-card-title">Media Right</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> </div> </div>
-
Background
A collection of utility classes to add different backgrounds to elements.
Uikit backgrounds
To apply a background color to an element, add one of the following classes. The actual color for each modifier is defined by the UIkit style that you have chosen or customized.
.uk-background-default
.uk-background-muted
.uk-background-primary
.uk-background-secondary
Default
Muted
Primary
Secondary
Theme backgrounds
To apply a background color to an element, add one of the following classes :
.bg-White
.bg-primary
.bg-Danger
.bg-success
.bg-Warning
.bg-info
.bg-grey
.bg-Dark
White
Primary
Danger
Success
Warning
Info
Grey
Dark
Light
Note To change the text inside the element to light use this class
uk-light
.Theme soft backgrounds
To apply a background color to an element, add one of the following classes :
.bg-soft-primary
.bg-soft-Danger
.bg-soft-success
.bg-soft-Warning
.bg-soft-info
.bg-soft-grey
.bg-soft-Dark
White
Primary
Danger
Success
Warning
Info
Dark
Gradient backgrounds
To apply a background color to an element, add one of the following classes :
.bg-gradient-primary
.bg-gradient-Danger
.bg-gradient-success
.bg-gradient-Warning
.bg-gradient-info
.bg-gradient-grey
.bg-gradient-dark
.bg-gradient-light
Primary
Danger
Success
Warning
Info
Dark
Grey
Light
Text Colors
.uk-text-muted .uk-text-emphasis .uk-text-primar .uk-text-secondary .uk-text-success .uk-text-warning .uk-text-info -
Flex
Utilize the power of flexbox to create a wide range of layouts.
To apply the flexbox layout modal, use one of the following classes. By default, all flex items are aligned to the left, as wide as their content and matched in height.
PREVIEW
Item 1Item 2Item 3<div class="uk-flex"> <div class="uk-card uk-card-default uk-card-body">Item 1</div> <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div> <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div> </div>
Horizontal alignment
These classes define the horizontal alignment of flex items and distribute the space between them. Add one or more of them to the flex container in order to configure the alignments of the flex items. By default, flex items are aligned to the left as does the
PREVIEW
Class Description .uk-flex-left
Add this class to align flex items to the left. .uk-flex-center
Add this class to center flex items along the main axis. .uk-flex-right
Add this class to align flex items to the right. .uk-flex-between
Add this class to distribute items evenly, with equal space between the items along the main axis. .uk-flex-around
Add this class to distribute items evenly with equal space on both sides of each item. Item 1Item 2Item 3<div class="uk-flex uk-flex-center"> <div class="uk-card uk-card-default uk-card-body">Item 1</div> <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2</div> <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3</div> </div>
Vertical alignment
These classes define the vertical alignment of flex items. By default, flex items fill the height of their container as does the
.uk-flex-stretch
class.PREVIEW
Class Description .uk-flex-stretch
Add this class to expand flex items to fill the height of their parent. .uk-flex-top
Add this class to align flex items to the top. .uk-flex-middle
Add this class to center flex items along the cross axis. .uk-flex-bottom
Add this class to align flex items to the bottom. Item 1Item 2
...Item 3
...
...<div class="uk-flex uk-flex-middle uk-text-center"> <div class="uk-card uk-card-default uk-card-body">Item 1</div> <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 2<br>...</div> <div class="uk-card uk-card-default uk-card-body uk-margin-left">Item 3<br>...<br>...</div> </div>
Flex and grid
The Flex component can be combined with a grid from the Grid component.
PREVIEW
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
<div class="uk-flex-middle" uk-grid> <div class="uk-width-2-3@m"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p> </div> <div class="uk-width-1-3@m uk-flex-first"> <img src="images/light.jpg" alt="Image"> </div> </div>
Direction modifiers
These classes define the axis that flex items are placed on and their direction. By default, items run horizontally from left to right as does the
.uk-flex-row
class.PREVIEW
Class Description .uk-flex-row
Add this class to lay out flex items as horizontal rows. .uk-flex-row-reverse
Add this class to lay out flex items from right to left. .uk-flex-column
Add this class to lay out flex items as vertical columns. .uk-flex-column-reverse
Add this class to lay out flex items from bottom to top. Item 1Item 2Item 3<div class="uk-flex uk-flex-column uk-width-1-3"> <div class="uk-card uk-card-default uk-card-body">Item 1</div> <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 2</div> <div class="uk-card uk-card-default uk-card-body uk-margin-top">Item 3</div> </div>
-
Form
Easily create nice looking forms with different styles and layouts.
Add one of the following classes to form controls inside a
Class Description .uk-input
Add this class to <input>
elements..uk-select
Add this class to <select>
elements..uk-textarea
Add this class to <textarea>
elements..uk-radio
Add this class to <input type="radio">
elements to create radio buttons..uk-checkbox
Add this class to <input type="checkbox">
elements to create checkboxes..uk-range
Add this class to <input type="range">
elements to create range forms.<form> <fieldset class="uk-fieldset"> <legend class="uk-legend">Legend</legend> <div class="uk-margin"> <input class="uk-input" type="text" placeholder="Input"> </div> <div class="uk-margin"> <select class="uk-select"> <option>Option 01</option> <option>Option 02</option> </select> </div> <div class="uk-margin"> <textarea class="uk-textarea" rows="5" placeholder="Textarea"></textarea> </div> <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid"> <label><input class="uk-radio" type="radio" name="radio2" checked> A</label> <label><input class="uk-radio" type="radio" name="radio2"> B</label> </div> <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid"> <label><input class="uk-checkbox" type="checkbox" checked> A</label> <label><input class="uk-checkbox" type="checkbox"> B</label> </div> <div class="uk-margin"> <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1"> </div> </fieldset> </form>
States modifiers
Add one of the classes to an
<input>
,<select>
or<textarea>
element to modify its size.Class Description .uk-form-danger
Add this class to notify the user that the value is not validated. .uk-form-success
Add this class to notify the user that the value is validated. <div class="uk-margin"> <input class="uk-input uk-form-danger uk-form-width-medium" type="text" placeholder="form-danger" value="form-danger"> </div> <div class="uk-margin"> <input class="uk-input uk-form-success uk-form-width-medium" type="text" placeholder="form-success" value="form-success"> </div> <div class="uk-margin"> <input class="uk-input uk-form-width-medium" type="text" placeholder="disabled" value="disabled" disabled> </div>
Size modifiers
Provide the user with basic information through feedback states on form controls by using one of the following classes.
Class Description .uk-form-large
Add this class to make the element larger. .uk-form-small
Add this class to make the element smaller. <form> <div class="uk-margin"> <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="Large"> </div> <div class="uk-margin"> <input class="uk-input uk-form-width-medium" type="text" placeholder="Default"> </div> <div class="uk-margin"> <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small"> </div> </form>
Width modifiers
Provide the user with basic information through feedback states on form controls by using one of the following classes.
Class Description .uk-form-width-large
Applies a width of 500px. .uk-form-width-medium
Applies a width of 200px. .uk-form-width-small
Applies a width of 130px. .uk-form-width-xsmall
Applies a width of 40px. <form> <div class="uk-margin"> <input class="uk-input uk-form-width-large" type="text" placeholder="Large"> </div> <div class="uk-margin"> <input class="uk-input uk-form-width-medium" type="text" placeholder="Medium"> </div> <div class="uk-margin"> <input class="uk-input uk-form-width-small" type="text" placeholder="Small"> </div> <div class="uk-margin"> <input class="uk-input uk-form-width-xsmall" type="text" placeholder="XSmall"> </div> </form>
Horizontal form
Use the
.uk-form-controls-text
class to better align checkboxes and radio buttons when using them with text in a horizontal layout.<form class="uk-form-horizontal uk-margin-large"> <div class="uk-margin"> <label class="uk-form-label" for="form-horizontal-text">Text</label> <div class="uk-form-controls"> <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Some text..."> </div> </div> <div class="uk-margin"> <label class="uk-form-label" for="form-horizontal-select">Select</label> <div class="uk-form-controls"> <select class="uk-select" id="form-horizontal-select"> <option>Option 01</option> <option>Option 02</option> </select> </div> </div> <div class="uk-margin"> <div class="uk-form-label">Radio</div> <div class="uk-form-controls uk-form-controls-text"> <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br> <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label> </div> </div> </form>
Form and icons
The icon has to come first in the markup. By default, the icon will be placed on the left side of the form. To change the alignment, add the
.uk-form-icon-flip
class.
<form> <div class="uk-margin"> <div class="uk-inline"> <span class="uk-form-icon" uk-icon="icon: user"></span> <input class="uk-input" type="text"> </div> </div> <div class="uk-margin"> <div class="uk-inline"> <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span> <input class="uk-input" type="text"> </div> </div> </form>
Clickable icons
To enable an action, for example opening a modal to pick an image or link, use an
<a>
or<button>
element to create the icon.
<form> <div class="uk-margin"> <div class="uk-inline"> <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a> <input class="uk-input" type="text"> </div> </div> <div class="uk-margin"> <div class="uk-inline"> <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a> <input class="uk-input" type="text"> </div> </div> </form>
Form and grid
You can also use the Grid components to define the layout of a form.
<form class="uk-grid-small" uk-grid> <div class="uk-width-1-1"> <input class="uk-input" type="text" placeholder="100"> </div> <div class="uk-width-1-2@s"> <input class="uk-input" type="text" placeholder="50"> </div> <div class="uk-width-1-4@s"> <input class="uk-input" type="text" placeholder="25"> </div> <div class="uk-width-1-4@s"> <input class="uk-input" type="text" placeholder="25"> </div> <div class="uk-width-1-2@s"> <input class="uk-input" type="text" placeholder="50"> </div> <div class="uk-width-1-2@s"> <input class="uk-input" type="text" placeholder="50"> </div> </form>
Custom controls
To replace a file inputs or select forms with your own HTML content, like a button or text, add the
uk-form-custom
attribute to a container element.
<form> <div class="uk-margin"> <div uk-form-custom> <input type="file"> <button class="uk-uk-button uk-button-default" type="button" tabindex="-1">Select</button> </div> </div> <div class="uk-margin"> <span class="uk-text-middle">Here is a text</span> <div uk-form-custom> <input type="file"> <span class="uk-link">upload</span> </div> </div> <div class="uk-margin" uk-margin> <div uk-form-custom="target: true"> <input type="file"> <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled> </div> <button class="uk-uk-button uk-button-default">Submit</button> </div> </form>
-
Grid
Create a fully responsive, fluid and nestable grid layout.
Usage :
To create the grid container, add the
uk-grid
attribute to a<div>
element. Add child<div>
elements to create the cells. By default, all grid cells are stacked. To place them side by side, add one of the classes from the Width component . Using.uk-child-width-expand
will automatically apply equal width to items, regardless of how many there are.PREVIEW
ItemItemItem<div class="uk-child-width-expand@s uk-text-center" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> </div>
Gutter modifiers
The Grid component comes with a default gutter that is decreased automatically from a certain breakpoint usually on a smaller desktop viewport width. To apply a different gutter, add one of the following classes.
PREVIEW
ItemItemItem<div class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> </div>
PREVIEW
ItemItemItem<div class="uk-grid-medium uk-child-width-expand@s uk-text-center" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> </div>
PREVIEW
ItemItemItem<div class="uk-grid-medium uk-child-width-expand@s uk-text-center" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> </div>
Nested grid
You can easily extend your grid layout with nested grids.
PREVIEW
ItemItemItem<div class="uk-child-width-1-2 uk-text-center" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-child-width-1-2 uk-text-center" uk-grid> <div> <div class="uk-card uk-card-primary uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-primary uk-card-body">Item</div> </div> </div> </div> </div>
Grid and width
The grid is mostly used in combination with the Width component. This allows for great flexibility when determining the column widths.
PREVIEW
Auto1-3Expand<div class="uk-text-center" uk-grid> <div class="uk-width-auto@m"> <div class="uk-card uk-card-default uk-card-body">Auto</div> </div> <div class="uk-width-1-3@m"> <div class="uk-card uk-card-default uk-card-body">1-3</div> </div> <div class="uk-width-expand@m"> <div class="uk-card uk-card-default uk-card-body">Expand</div> </div> </div>
Child width
If the grid columns are evenly split, you can add one of the
.uk-child-width-*
classes to the grid container instead of adding a class to each of the items.you can add one of this
.uk-child-width-1-2
.uk-child-width-1-3
.uk-child-width-1-4
.uk-child-width-1-5
.uk-child-width-1-6
PREVIEW
ItemItemItem<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-text-center" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div class="uk-card uk-card-default uk-card-body">Item</div> </div> </div>
-
heading
Define different styles for headings.
Add one of the following classes to modify the size and style of headings. Usually, these classes would be used on heading elements but they work also with any other element like a div element. Note that these classes extend the heading classes from the Base component upward, and the smallest modifier picks up the size after h1 element.
PREVIEW
Small
Medium
Large
XLarge
2XLarge
<h1 class="uk-heading-small">Small</h1> <h1 class="uk-heading-medium">Medium</h1> <h1 class="uk-heading-large">Large</h1> <h1 class="uk-heading-xlarge">XLarge</h1> <h1 class="uk-heading-2xlarge">2XLarge</h1>
Divider modifier
To apply a divider to a heading, add the
.uk-heading-divider
class. You can combine it with any size modifier.PREVIEW
Heading Divider
<h1 class="uk-heading-divider">Heading Divider</h1>
Bullet modifier
To apply a bullet to a heading, add the
.uk-heading-bullet
class. You can combine it with any size modifier, and it works well with text alignment.PREVIEW
Heading Bullet
<h1 class="uk-heading-bullet">Heading Bullet</h1>
Line modifier
To apply a vertically centered line to a heading, add the
.uk-heading-line
class and place aspan
element inside the heading element. You can combine it with any size modifier, and it works well with text alignment.PREVIEW
Heading Line
Heading Line
Heading Line
<h1 class="uk-heading-line"><span>Heading Line</span></h1> <h1 class="uk-heading-line uk-text-center"><span>Heading Line</span></h1> <h1 class="uk-heading-line uk-text-right"><span>Heading Line</span></h1>
Divider small
Add the
.uk-divider-small
class to a<hr>
or<div>
element to create a smaller divider.PREVIEW
Heading text
<h1 class="uk-divider-small">Heading Text</h1>
-
Icons
Place scalable vector icons anywhere in your content.
Available Icons
You have access to more than thousands icons provided freely by FontAwesome, Material icons, Line Awesome Icons, and Feather icons.
Icon size
You can use
.icon-tiny
.icon-small
.icon-medium
.icon-large
.icon-xlarge
and.icon-xxlarge
.
<i class="icon-feather-folder icon-tiny"></i> <i class="icon-feather-folder icon-small"></i> <i class="icon-feather-folder icon-medium"></i> <i class="icon-feather-folder icon-large"></i> <i class="icon-feather-folder icon-xlarge"></i> <i class="icon-feather-folder icon-xxlarge"></i>
Button with icon
Button with icon animation
<button class="button primary transition-3d-hover"> <i class="icon-feather-shopping-cart mr-2"></i> Buy now </button> <button class="button outline-primary transition-3d-hover"> <i class="icon-feather-shopping-cart mr-2"></i> Buy now </button> <button class="button danger icon-label bg-facebook"> <span class="inner-icon"><i class="fas fa-play"></i></span> <span class="inner-text">Watch now </span> </button>
-
List
Easily create nice looking lists, which come in different styles.
To apply this component, add the
.uk-list
class to an unordered or ordered list. The list will now display without any spacing or list-style.- List item 1
- List item 2
- List item 3
<ul class="uk-list"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Bullet modifier
Add the
.uk-list-bullet
class to display bullets in front of the list items.- List item 1
- List item 2
- List item 3
<ul class="uk-list uk-list-bullet"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Divider modifier
Add the
.uk-list-divider
class to separate list items with lines.- List item 1
- List item 2
- List item 3
<ul class="uk-list uk-list-divider"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Striped modifier
Add the
.uk-list-divider
class to separate list items with lines.- List item 1
- List item 2
- List item 3
<ul class="uk-list uk-list-striped"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Large modifier
Add the
.uk-list-large
class to increase the spacing between list items. You can combine this with any of the other list modifiers.Default
- List item 1
- List item 2
- List item 3
Divider
- List item 1
- List item 2
- List item 3
Striped
- List item 1
- List item 2
- List item 3
Bullet
- List item 1
- List item 2
- List item 3
<div class="uk-child-width-expand@s" uk-grid> <div> <h4>Default</h4> <ul class="uk-list uk-list-large"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div> <div> <h4>Divider</h4> <ul class="uk-list uk-list-large uk-list-divider"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div> <div> <h4>Striped</h4> <ul class="uk-list uk-list-large uk-list-striped"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div> <div> <h4>Bullet</h4> <ul class="uk-list uk-list-large uk-list-bullet"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div> </div>
-
pagination
Easily create a nice looking pagination to navigate through pages.
The Pagination component consists of button-like styled links, that are aligned side by side in a horizontal list.
PREVIEW
<ul class="uk-pagination" 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>
Alignment
The pagination component utilizes flexbox, so navigations can easily be aligned with the Flex component .
<ul class="uk-pagination uk-flex-center">...</ul>
PREVIEW
<ul class="uk-pagination" 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="#">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="#"><span uk-pagination-next></span></a></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="#">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="#"><span uk-pagination-next></span></a></li> </ul> <ul class="uk-pagination uk-flex-right uk-margin-medium-top" 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="#">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="#"><span uk-pagination-next></span></a></li> </ul>
Previous and next
To apply a previous and next button, add the
uk-pagination-previous
oruk-pagination-next
attribute to a<span>
element inside a pagination item.PREVIEW
<ul class="uk-pagination"> <li><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li> <li class="uk-margin-auto-left"><a href="#">Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li> </ul>
-
Position
A collection of utility classes to position content
To apply this component, add one of the
.uk-position-*
classes to a block element. When using this component to place content on top of an image, add the.uk-inline
class from the Utility component to a container element around the image and the element to create a position context.Class Description .uk-position-top
Positions the element at the top. .uk-position-left
Positions the element at the left. .uk-position-right
Positions the element at the right. .uk-position-bottom
Positions the element at the bottom. TopBottomLeftRight<div class="uk-inline uk-margin"> <img src="images/photo.jpg" alt=""> <div class="uk-position-top uk-overlay uk-overlay-default uk-text-center">Top</div> <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">Bottom</div> <div class="uk-position-left uk-overlay uk-overlay-default uk-flex uk-flex-middle">Left</div> <div class="uk-position-right uk-overlay uk-overlay-default uk-flex uk-flex-middle">Right</div> </div>
X and Y directions
You can also apply more specific positions that won't spread over one side of the parent container by adding one of the following classes.
Top LeftTop CenterTop RightCenter LeftCenterCenter RightBottom LeftBottom CenterBottom Right<div class="uk-inline"> <img src="images/photo.jpg" alt=""> <div class="uk-position-top-left uk-overlay uk-overlay-default">Top Left</div> <div class="uk-position-top-center uk-overlay uk-overlay-default">Top Center</div> <div class="uk-position-top-right uk-overlay uk-overlay-default">Top Right</div> <div class="uk-position-center-left uk-overlay uk-overlay-default">Center Left</div> <div class="uk-position-center uk-overlay uk-overlay-default">Center</div> <div class="uk-position-center-right uk-overlay uk-overlay-default">Center Right</div> <div class="uk-position-bottom-left uk-overlay uk-overlay-default">Bottom Left</div> <div class="uk-position-bottom-center uk-overlay uk-overlay-default">Bottom Center</div> <div class="uk-position-bottom-right uk-overlay uk-overlay-default">Bottom Right</div> </div>
Cover
If you want a position element to cover its container, just add the
.uk-position-cover
class.Cover<div class="uk-inline"> <img src="images/photo.jpg" alt=""> <div class="uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Cover</div> </div>
Small modifier
To apply a small margin to positioned elements, add the
.uk-position-small
or.uk-position-medium
and.uk-position-large
class.Top LeftTop CenterTop RightCenter LeftCenterCenter RightBottom LeftBottom CenterBottom RightTopBottomLeftRightCoverOutOutUtility classes
This component features a number of general position utility classes:
Class Description .uk-position-relative
Add this class to apply relative positioning. .uk-position-absolute
Add this class to apply absolute positioning. .uk-position-fixed
Add this class to apply fixed positioning. .uk-position-z-index
Add this class to apply a z-index of 1. Outside
There are two classes to center elements outside on the left and right of the parent container. This is useful to position the Slidenav component outside of an Slideshow or Slider component.
OutOut<div class="uk-inline"> <img src="images/photo.jpg" alt=""> <div class="uk-position-center-left-out uk-overlay uk-overlay-primary uk-visible@s">Out</div> <div class="uk-position-center-right-out uk-overlay uk-overlay-primary uk-visible@s">Out</div> </div>
-
Table
Easily create nice looking tables, which come in different styles.
To apply this component, add the
.uk-table
class to a<table>
element. element.Table Heading Table Heading Table Heading Table Footer Table Footer Table Footer Table Data Table Data Table Data Table Data Table Data Table Data <table class="uk-table"> <caption>Table Caption</caption> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tfoot> <tr> <td>Table Footer</td> <td>Table Footer</td> <td>Table Footer</td> </tr> </tfoot> <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> </tbody> </table>
Divider modifier
<table class="uk-table uk-table-divider">...</table>
Add the
.uk-table-divider
class to display a divider between table rows.Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <table class="uk-table uk-table-divider"> <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> </tbody> </table>
Striped modifier
<table class="uk-table uk-table-striped">...</table>
Add zebra-striping to a table by adding the
.uk-table-striped
class.Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <table class="uk-table uk-table-striped"> <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> </tbody> </table>
Responsive table
<div class="uk-overflow-auto"> <table class="uk-table">...</table> </div>
If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a
<div>
element and add the.uk-overflow-auto
class .. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itselfTable Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading 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 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 <div class="uk-overflow-auto"> <table class="uk-table uk-table-small uk-table-divider"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <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> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <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> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <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> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table> </div>
-
Tab
Create a tabbed navigation with different styles.
The tab component consists of clickable tabs, that are aligned side by side in a list. Its JavaScript functionality extends the Switcher component and is necessary to dynamically transition through different contents using the tabbed navigation.
<ul uk-tab> <li class="uk-active"><a href="#">Left</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-disabled"><a>Disabled</a></li> </ul>
Bottom modifier
Add the
.uk-tab-bottom
class to flip tab items to the bottom.<ul class="uk-tab-bottom" uk-tab> <li class="uk-active"><a href="#">Left</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul>
Left/Right modifier
Add the
.uk-tab-left
or.uk-tab-right
class to align tabs vertically to the left or right side. To save space, the alignment automatically switches back to horizontal when the viewport width goes below 960px.<div class="uk-child-width-1-2@s" uk-grid> <div> <ul class="uk-tab-left" uk-tab> <li class="uk-active"><a href="#">Left</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-tab-right" uk-tab> <li class="uk-active"><a href="#">Right</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </div>
Alignment
You can combine tabs with the Flex component or the Width component to modify the alignment of the navigations.
<div class="uk-margin-medium-top"> <ul class="uk-flex-center" uk-tab> <li class="uk-active"><a href="#">Center</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-flex-right" uk-tab> <li class="uk-active"><a href="#">Right</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="uk-child-width-expand" uk-tab> <li class="uk-active"><a href="#">Justify</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div>
Tabs and Dropdown
Tabs can be used to trigger a dropdown menu from the Dropdown component
<ul uk-tab> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li> <a href="#">More <span class="uk-margin-small-left" uk-icon="icon: triangle-down"></span></a> <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-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> </ul>
light Tabs
.uk-light
to change your tabs to light and background compunents-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
Advance tab
Tabs can be used to trigger a dropdown menu from the Dropdown component
Awesome Title
With supporting text below as a natural lead-in to additional content.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
tab width icon
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Nam liber tempor cum soluta nobis.
Eleifend option congue nihil imperdiet doming id qsuod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat
Responsive Tabs
Awesome Title
With supporting text below as a natural lead-in to additional content.
-
-
Text
A collection of useful text utility classes to style your content.
UIkit offers various text utilities to style your text.
Class Description .uk-text-lead
Add this class to highlight text, for example in article subtitles. .uk-text-meta
Add this class to a paragraph which contains meta data about an article or similar. Font size
The following classes will modify the font size of your text..
Class Description .uk-text-small
Add this class to decrease the font size. .uk-text-large
Add this class to increase the font size. Text wrapping
Add one of these useful classes to wrap your text.
Class Description .uk-text-truncate
Prevents text from wrapping into multiple lines, truncating it and displaying an ellipsis instead. .uk-text-break
Breaks strings, if their length exceeds the width of their container. .uk-text-nowrap
Prevents text from wrapping into multiple lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.<div class="uk-child-width-1-2@s" uk-grid> <div> <div class="uk-panel uk-panel-box uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> <div> <div class="uk-panel uk-panel-box uk-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div> </div> </div>
Text transform
The following classes will transform text into uppercased, capitalized or lowercased characters.
Class Description .uk-text-uppercase
Add this class to transform your text to uppercase. .uk-text-capitalize
Add this class to transform your text to capitalize. .uk-text-lowercase
Add this class to transform your text to lowercase. Text Colour
Use one of these classes to apply a different color to text elements.
Class Description .uk-text-muted
Add this class to mute text. .uk-text-emphasis
Add this class to emphasize text. .uk-text-primary
Add this class to emphasize text with the primary color. .uk-text-secondary
Add this class to emphasize text with the secondary color. .uk-text-success
Add this class to indicate success. .uk-text-warning
Add this class to indicate a warning. .uk-text-danger
Add this class to indicate danger. .uk-text-info
Add this class to indicate informations. Text alignment
Add one of these useful classes to align your text.
Class Description .uk-text-left
Aligns text to the left. .uk-text-right
Aligns text to the right. .uk-text-center
Centers text horizontally. .uk-text-justify
Justifies text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr..uk-text-left
Lorem ipsum dolor sit amet, consetetur sadipscing elitr..uk-text-right
Lorem ipsum dolor sit amet, consetetur sadipscing elitr..uk-text-center
Vertical alignment
Add one of these classes to vertically align text to an object.
Class Description .uk-text-top
Aligns text to the top. .uk-text-middle
Centers text vertically. .uk-text-bottom
Aligns text to the bottom. .uk-text-baseline
Aligns text to the baseline. Lorem ipsum.Lorem ipsum.Lorem ipsum.<div class="uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid> <div> <img src="images/avatar.jpg" width="50" height="50"> <span class="uk-text-top">Lorem ipsum.</span> </div> <div> <img src="images/avatar.jpg" width="50" height="50"> <span class="uk-text-middle">Lorem ipsum.</span> </div> <div> <img src="images/avatar.jpg" width="50" height="50"> <span class="uk-text-bottom">Lorem ipsum.</span> </div> </div>
Text background
To apply a gradient or background image to text, add the
.uk-text-background
class to a<span>
element inside the text element. Styles that don't define abackground-image
, will apply the primary color.Text background
<h1><span class="uk-text-background"></span></h1>