Typography

Base

Provides the default style for all HTML elements.

This component defines the base look of your page. It offers great typography by setting the default colors, margins, font-sizes and more for each HTML element. This page is a short guide on how to use basic HTML elements and how UIkit styles them.


Headings

Use the <h1> to <h6> elements to define your headings.

Example

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
h6 Heading 6

You can add the .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 or .uk-h6 class to alter the size of your headings, for example have a h1 look like a h3.


Paragraphs

The global font-size, line-height and regular margins between elements are set through variables, which can be customized. Paragraphs and other block elements stick to these values.


Text-level semantics

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

Element Description
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<q> Define inline quotations using q element inside a q element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

Horizontal rule

Create a horizontal rule by using the <hr> element.

Example



Blockquotes

For quoting multiple lines of content from another source within your document, use the <blockquote> element.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Someone famous

Markup

<blockquote>
    <p>Quotation</p>
    <small>Source</small>
</blockquote>

Code blocks

For multiple lines of code, use the <pre> element which defines preformatted text. It creates a new text block that preserves spaces, tabs and line breaks. Nest a <code> element inside to define the code block.
IMPORTANT Be sure to escape any angle brackets in the code for proper rendering.

Example

<pre>
    <code>...</code>
</pre>

NOTE Optionally, you can add the .uk-scrollable-text class from the Utility component, which will set a max-height of 300px and provide a y-axis scrollbar.


Lists

Create an unordered list using the <ul> element and the <ol> element for ordered lists. The <li> element defines the list item.

Example

  • Item 1
  • Item 2
    • Item 1
    • Item 2
      • Item 1
      • Item 2
  • Item 3
  • Item 4
  1. Item 1
  2. Item 2
    1. Item 1
    2. Item 2
      1. Item 1
      2. Item 2
  3. Item 3
  4. Item 4

Markup

<ul>
    <li>...</li>
    <li>...
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>
<ol>
    <li>...</li>
    <li>...
        <ol>
            <li>...</li>
        </ol>
    </li>
</ol>

Description lists

Create a description list using the <dl> element. Use <dt> to define the term and <dd> for the description.

Example

Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.

Markup

<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

Tables

Create a table using the <table> element. Use <tr>, <td> and <th> elements to create table rows, table cells and table headings. The <thead>, <tbody> and <tfoot> elements define the table parts. You can also create captions by adding the <caption> element.

Example

Table caption
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 Data Table Data Table Data

Markup

<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Responsive images

All images in UIkit are responsive by default. If the layout is narrowed, images adjust their size and keep their proportions.

Example

Resize the browser window to see the responsive behavior of the image.

NOTE To avoid the responsive behavior and preserve the original image dimensions, add the .uk-img-preserve class to one of your single images. If you have more than one image, you can also add the class to the parent container. This is not required for Google Maps.

Print

Optimize your pages for economic printing.

This component is based on the print styles from HTML5 Boilerplate. It strips your document from background colors and changes font colors to black to save printer ink. Pictures will be scaled down to fit the page and anchors are underlined to distinguish them from regular text.


Modifications

For UIkit, we removed the link href and title related rules.

Text

A collection of useful text utility classes to style your content.

Text styles

UIkit offers various text utlities to style 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.
.uk-text-bold Add this class to create bold text.
.uk-text-muted Add this class to mute your text.
.uk-text-info Add this class for additional text information.
.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.

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 horizontallly.
.uk-text-justify Justifies text.

Example

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
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-justify

Text wrapping

Add one of these useful classes to wrap your text.

Class Description
.uk-text-break Breaks long words.
.uk-text-truncate Truncates text.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit .uk-text-break

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.

.uk-text-truncate

Article

Create articles within your page.

Usage

The article component constists of the article itself, a title, meta data, an opening paragraph and dividers.

Class Description
.uk-article Add this class to define the Article component. Typically you would use an <article> element for this.
.uk-article-title Add this class to a heading to create an article title. Typically you would use a <h1> element for this.
.uk-article-meta Add this class to a paragraph which contains meta data about your article.
.uk-article-lead Add this class to the opening paragraph of your article to highlight it.
.uk-article-divider Add this class to a <hr> element to create a divider seperating different sections of your article.

Example

Article title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.


Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Read more

Markup

<article class="uk-article">
    <h1 class="uk-article-title">...</h1>
    <p class="uk-article-meta">...</p>
    <p class="uk-article-lead">...</p>
    ...
    <hr class="uk-article-divider">
    ...
</article>

List

Easily create nicely looking lists, which come in different styles.

Usage

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.

Example

  • List item 1
  • List item 2
  • List item 3

Markup

<ul class="uk-list">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

Modifiers

To display the list in a different style, just add a modifier class to the the .uk-list class. The modifiers of the List component are not combinable with each other.

List line

Add the .uk-list-line class to separate list items with lines.

Example

  • List item 1
  • List item 2
  • List item 3

Markup

<ul class="uk-list uk-list-line">...</ul>

List striped

Add zebra-striping to a list using the .uk-list-striped class.

Example

  • List item 1
  • List item 2
  • List item 3

Markup

<ul class="uk-list uk-list-striped">...</ul>

List space

Add the .uk-list-space class to increase the spacing between list items.

Example

  • This modifier may be useful for for list items with multiple lines of text.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Markup

<ul class="uk-list uk-list-space">...</ul>

Description list

Easily create nicely looking description lists, which come in different styles.

Usage

To apply this component, add the .uk-description-list class to a description list.

Example

This is a term
This is a description.

Markup

<dl class="uk-description-list">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Modifiers

To display the description list in a different style, just add a modifier class to the .uk-description-list class. The modifiers of the Description lists component are not combinable with each other.

Description list horizontal

Add the .uk-description-list-horizontal class to display terms and descriptions side by side.

Example

Description lists
A description list defines terms and their corresponding descriptions.
Lorem ipsum
Dolor sit amet, consectetur adipisicing 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.
A long term is truncated
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Markup

<dl class="uk-description-list uk-description-list-horizontal">...</dl>

Responsive behavior

In narrower viewports, like phones, the style will change back to the default stacked description list.


Description list line

Add the .uk-description-list-line class to separate the description list items with lines.

Example

Description lists
A description list defines terms and their corresponding descriptions.
Lorem ipsum
Dolor sit amet, consectetur adipisicing 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.

Markup

<dl class="uk-description-list uk-description-list-line">...</dl>

Grid

Create a fully responsive, fluid and nestable grid layout.

The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid columns. It uses units with predefined classes inside each grid, which define the column width.


Usage

To create the grid container, add the .uk-grid class to a parent element. Add one of the .uk-width-* classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions. This table gives you an overview of the uk-width-* classes that can be applied to units.

Class Description
.uk-width-1-1 Fills 100% of the available width.
.uk-width-1-2 Divides the grid into halves.
.uk-width-1-3 to .uk-width-2-3 Divides the grid into thirds.
.uk-width-1-4 to .uk-width-3-4 Divides the grid into fourths.
.uk-width-1-5 to .uk-width-4-5 Divides the grid into fifths.
.uk-width-1-6 to .uk-width-5-6 Divides the grid into sixths.
.uk-width-1-10 to .uk-width-9-10 Divides the grid into tenths.

We built an intentional redundancy into each set of unit classes, so that for instance the .uk-width-5-10 class will work just as well as .uk-width-1-2.

Example

Take a closer look at the following grid example, which gives you a great overwiew of all basic .uk-width-* classes.

.uk-width-1-3
.uk-width-1-3
.uk-width-1-3
.uk-width-1-2
.uk-width-1-2
.uk-width-3-10
.uk-width-7-10

NOTE The grid has no style related CSS. In our example we used panels from the Panel component.

Markup

Here is a simple code example of how the default grid with 2 columns would look like:

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

Responsive width

UIkit provides a number of very useful responsive widths classes. Basicall they work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. These classes can be combined with the visibility classes from the Utility component. This is great to adjust your layout and content for different device sizes.

Class Description
.uk-width-* Affects all device widths, grid columns stay side by side.
.uk-width-medium-* Affects device widths of 768px and higher. Grid columns will stack on smaller sizes.
.uk-width-large-* Affects device widths of 960px and higher. Grid columns will stack on smaller sizes.

IMPORTANT To create a margin between stacking grid columns, just add the data-uk-grid-margin attribute.

Example

.uk-width-medium-1-2 .uk-width-large-1-3
.uk-hidden-medium .uk-width-large-1-3
.uk-width-medium-1-2 .uk-width-large-1-3
.uk-width-1-2 .uk-width-medium-1-3
.uk-hidden-small .uk-width-medium-1-3
.uk-width-1-2 .uk-width-medium-1-3
.uk-width-1-1 .uk-visible-small
.uk-width-medium-1-1 .uk-visible-medium
.uk-width-large-1-1 .uk-visible-large

Grid gutter

Grids automatically create a horizontal gutter between columns and a vertical one between two succeeding grids. By default, the grid gutter is wider on large screens. To avoid this behavior and preserve the originial spacing, just add the .uk-grid-preserve class.

Example

Lorem ipsum
Lorem ipsum
Lorem ipsum

Nested grid

You can easily extend your grid layout with nested grids.

Example

.uk-width-1-2
.uk-width-1-2
.uk-width-1-2

Markup

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

Center grid

Add the .uk-container-center class from the Utility component to center a grid column.

Example

.uk-container-center

Grid divider

Add the .uk-grid-divider class to separate grid columns with lines. To seperate grids with a horizontal line, just add the class to a <hr> or <div> element.

Example

.uk-width-medium-1-3
.uk-width-medium-1-3
.uk-width-medium-1-3

.uk-width-medium-1-3
.uk-width-medium-1-3
.uk-width-medium-1-3

Markup

<div class="uk-grid uk-grid-divider">...</div>
<hr class="uk-grid-divider">
<div class="uk-grid uk-grid-divider">...</div>

NOTE The horizontal divider can not be applied to grids with any of the uk-push-* or uk-pull-* classes.


Source ordering

You can change the display order of the columns to keep a specific column order in the source code. Add one of the .uk-push-* classes to move the column to the right and add one of the .uk-pull-* classes to move a column to the left. This allows you for example to flip the columns‘ display order for wider viewports. The classes can also be used to offset columns, creating additional space between them.

Source ordering is useful for SEO and responsive design, because in narrow viewports the grid will be displayed according to the source order of the markup.

NOTE This feature only works in combination with one of the .uk-width-medium-* classes.

Example

.uk-width-medium-1-2 .uk-push-1-2
.uk-width-medium-1-2 .uk-pull-1-2
.uk-width-medium-2-5 .uk-push-3-5
.uk-width-medium-2-5 .uk-pull-2-5

Markup

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

Match column heights

To match the height of grid columns, just add the data-uk-grid-match attribute to your grid.

Example

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Markup

<div class="uk-grid" data-uk-grid-match>...</div>

NOTE If 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.


Match height of panels

If you want to match the heights of panels in a grid, just add the {target:'.uk-panel'} selector.

Example

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Markup

<div class="uk-grid" data-uk-grid-match="{target:'.uk-panel'}">
    <div class="uk-width-medium-1-3">
        <div class="uk-panel">...</div>
    </div>
</div>

Wrap multiple rows

You can also create a grid with as many columns as you want, which automatically break into the next line. Just add the data-uk-grid-margin attribute to create a margin between the grid rows. Typically this layout is built using a <ul> element.

Example

  • Box
  • Box
  • Box
  • Box
  • Box
  • Box

NOTE You can also apply a custom width to your grid columns. Just add the .uk-width-custom class and use an inline style to define the width. This example uses fixed pixel values for the widths as you would do with images.

  • Box
  • Box
  • Box
  • Box
  • Box
  • Box
  • Box
  • Box

Markup

<ul class="uk-grid" data-uk-grid-margin>

    <!-- These elements have a width in percent -->
    <li class="uk-width-medium-1-5"">...</li>
    <li class="uk-width-medium-3-10"">...</li>

    <!-- These elements have a width in pixel -->
    <li class="uk-width-custom" style="width: 100px;">...</li>
    <li class="uk-width-custom" style="width: 150px;">...</li>

</ul>

Panel

Create layout boxes with different styles.

UIkit uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the Grid component.


Usage

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel’s content.

Class Description
.uk-panel Add this class to a <div> element to define the Panel component.
.uk-panel-title Add this class to a heading to create the panel title.
.uk-panel-badge Add this class to a <div> element to create a panel badge. The easiest way to style your badge, is by adding the modifier classes from the Badge component.

Example

Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTE By default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the .uk-panel-box class.

Markup

<div class="uk-panel">
    <div class="uk-panel-badge uk-badge">...</div>
    <h3 class="uk-panel-title">...</h3>
    ...
</div>

Panels in a grid

This is a short example of how to use panels with the Grid component. Both panels are using the .uk-width-medium-1-2 class.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Markup

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

Modifiers

Modifier classes are necessary to add a specific style to panels. UIkit includes a number of panel modifiers and you also have the possibility to create your own.

Panel box

Add the .uk-panel-box class to create a visually styled box. This is the default panel modifier.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box

Markup

<div class="uk-panel uk-panel-box">...</div>

Add the .uk-panel-box-primary class to modify the box panel and emphasize it with a different color.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-primary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-primary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-primary

Markup

<div class="uk-panel uk-panel-box uk-panel-box-primary">...</div>

Add the .uk-panel-box-secondary class to modify the box panel and give it a white background.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-box-secondary

Markup

<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>

Panel header

Add the .uk-panel-header class to seperate the panel title and content with a horizontal line.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-header

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-header

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-header

Markup

<div class="uk-panel uk-panel-header">...</div>

Panel space

Add the .uk-panel-space class to increase the spacing around the panel content.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-space

Markup

<div class="uk-panel uk-panel-space">...</div>

Panel divider

Add the .uk-panel-divider class to separate vertically stacked panels with lines.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. .uk-panel-divider

Markup

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

NOTE Use the .uk-grid-divider class from the Grid component to seperate grid columns.


Panel with icons

Easily apply an icon from our Icon component to your panel by adding one of the .uk-icon-* classes to an <i> or <span> element inside the panel title.

Example

Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Markup

<div class="uk-panel">
    <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>
</div>

Table

Easily create nicely looking tables, which come in different styles.

Usage

To apply this component, add the .uk-table class to a table. The table rows will be separated by lines.

Example

Table caption
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 Data Table Data Table Data

Markup

<table class="uk-table">
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Columns

To modify the column width or content, you can use other components. Here are some useful examples:

Style Description
Column width Add one of the .uk-width-* classes from the Grid component.
Text alignment Add the .uk-text-left, .uk-text-right or .uk-text-center class from the Text component.
Text style Take a look at the Text component. For example add the .uk-text-bold class.

Markup

<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>

Vertical modifier

To vertically center table content, just add the .uk-table-middle class to the <tr> or <td> elements.


Modifiers

To display the table in a different style, just add a modifier to the the .uk-table class.

Table hover

Add the .uk-table-hover class to display a hover state on table rows.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

<table class="uk-table uk-table-hover">...</table>

Table striped

Add zebra-striping to a table by adding the .uk-table-striped class.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

<table class="uk-table uk-table-striped">...</table>

Table condensed

Add the .uk-table-condensed class to make table cells more compact.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

<table class="uk-table uk-table-condensed">...</table>

Combine modifiers

The modifiers of the Table component are combinable with each other.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table>

Thumbnail

Create different thumbnail images, which come in various styles and sizes.

Usage

To apply this component, just add the .uk-thumbnail class to an <img>, <a> or <figure> element.

Example


Markup

<!-- This is an image as a thumbnail -->
<img class="uk-thumbnail" src="" alt="">

<!-- This is an anchor as a thumbnail -->
<a class="uk-thumbnail" href=""><img src="" alt=""><a>

<!-- This is a figure as a thumbnail -->
<figure class="uk-thumbnail"><img src="" alt=""><figure>

Caption

Add the .uk-thumbnail-caption class to a <div> element to apply a text caption under the image.

Example

Caption <div>


Caption <a>

 

Caption <figure>

Markup

<!-- This is a div as a thumbnail with a caption -->
<div class="uk-thumbnail">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</div>

<!-- This is an anchor as a thumbnail with a caption -->
<a class="uk-thumbnail" href="">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</a>

<!-- This is a figure as a thumbnail with a caption -->
<figure class="uk-thumbnail">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">...</figcaption>
</figure>

Size modifiers

Apply the .uk-thumbnail-large, .uk-thumbnail-medium, .uk-thumbnail-small or .uk-thumbnail-mini classes to resize images. The Base component is required to make the images responsive by default.

Example

.uk-thumbnail-large

.uk-thumbnail-medium

.uk-thumbnail-small

.uk-thumbnail-mini

Markup

<div class="uk-thumbnail uk-thumbnail-large">...</div>
<div class="uk-thumbnail uk-thumbnail-medium">...</div>
<div class="uk-thumbnail uk-thumbnail-small">...</div>
<div class="uk-thumbnail uk-thumbnail-mini">...</div>

You can even scale a thumbnail beyond its proper size, so that it extends to the full width of its parent element. Just add the .uk-thumbnail-expand class.

Example

.uk-thumbnail-expand

Markup

<div class="uk-thumbnail uk-thumbnail-expand">...</div>

Grid

You can easily create a grid with thumbnails by using the Grid component.

Example

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
    <div class="uk-width-medium-1-2">
        <div class="uk-grid">
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
        </div>
</div>

Progress

Defines different styles for progress bars.

Usage

The progress bar consists of a background bar and the progress bar itself, indicating the increase.

Class Description
.uk-progress This class is used on the parent container to create the background of the progress bar.
.uk-progress-bar This class needs to be added to the child element to create the actual progress bar.

Example

40%

Markup

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>

Size modifiers

Add the .uk-progress-mini or .uk-progress-small class to change the size of the bar.

Example

.
.
60%

Markup

<div class="uk-progress uk-progress-mini">...</div>
<div class="uk-progress uk-progress-small">...</div>

Utility

A collection of useful utility classes to style your content.

Container

Add the .uk-container class to a block element to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.


Centering

To center the container, use the .uk-container-center class. For any other block element, you additionally need to apply a width.

Example

Centered block element

Markup

<div class="uk-width-medium-1-2 uk-container-center">...</div>

Clearing and floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Class Description
.uk-float-left Float the element to the left.
.uk-float-right Float the element to the right.
.uk-clearfix Add this class to a parent container to clear floats.

Markup

<div class="uk-clearfix">
    <div class="uk-float-right">...</div>
    <div class="uk-float-left">...</div>
</div>

New block formatting context

Instead of using the .uk-clearfix class, you can create a new block formatting context to clear floats. Depending on your setup, you can evaluate which method is more suited.

Class Description
.uk-nbfc Sets overflow to hidden to create a new block formatting context.
.uk-nbfc-alt Sets display to table-cell to create a new block formatting context.

Alignment of images and objects

Align images or other elements with spacing between the text and the element.

Class Description
.uk-align-left Floats the element to the left and creates right and bottom margin.
.uk-align-right Floats the element to the right and creates left and bottom margin.
.uk-align-medium-left Only affects device widths of 768px and higher.
.uk-align-medium-right Only affects device widths of 768px and higher.
.uk-align-center Centers the element and creates bottom margin.

Example

Image aligned to the rightLorem ipsum dolor sit amet, consectetur adipisicing 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.

Markup

<p class="uk-clearfix">
    <img class="uk-align-medium-right" src="" alt="">
    ...
</p>

Vertical alignment

To align objects vertically, you need to create a parent container to which the object itself will be aligned.

Class Description
.uk-vertical-align Add this class to the parent container. This container needs a specific height.
.uk-vertical-align-middle Add this class to the child element to center your content.
.uk-vertical-align-bottom Add this class to the child element to align your content to the bottom.
.uk-height-1-1 This helper class applies a height of 100%.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

<div class="uk-vertical-align">
    <div class="uk-vertical-align-middle">
    ...
    </div>
</div>
<div class="uk-vertical-align">
    <div class="uk-vertical-align-bottom">
    ...
    </div>
</div>

NOTE The object you align needs to have a width or max-width that is smaller than its parent container.

Center the entire page

The .uk-height-1-1 class comes in handy, if you want to extend the <html> and <body> elements to the full height of the page. This can be very useful when creating error pages.

Markup

<html class="uk-height-1-1">
    ...
    <body class="uk-height-1-1">
        <div class="uk-vertical-align">
            <div class="uk-vertical-align-middle">...</div>
        </div>
    </body>
</html>

Center horizontally

To center your content horizontally as well, add the .uk-text-center class to the parent and the .uk-container-center class to the child element. This is necessary because of the responsive behavior.


Responsive objects

Images in UIkit adapt to the width of their parent container by default. If you want to apply the responsive behavior to media elements, like a video object, just add one of the following classes.

Class Description
.uk-responsive-width Adjusts the object’s width according to its parent’s width, keeping the original aspect ratio.
.uk-responsive-height Adjusts the object’s height according to its parent’s height, keeping the original aspect ratio.

Example width

 

Example height

Markup

<video controls class="uk-responsive-width"></video>

<img class="uk-responsive-height" src="" alt="">

Margin

Add one of the following classes to add spacing to block elements.

Class Description
.uk-margin Adds the same top and bottom margins as a paragraph usually has.
.uk-margin-top Adds top margin.
.uk-margin-bottom Adds bottom margin.
.uk-margin-left Adds left margin.
.uk-margin-right Adds right margin.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Class Description
.uk-margin-small-top Adds small top margin.
.uk-margin-small-bottom Adds small bottom margin.
.uk-margin-small-left Adds small left margin.
.uk-margin-small-right Adds small right margin.

Remove margin

Add one of the following classes to remove spacing from block elements.

Class Description
.uk-margin-remove Removes all margins.
.uk-margin-top-remove Removes top margin.
.uk-margin-bottom-remove Removes bottom margin.

Auto margin

To add spacing to stacking elements, for example inline elements that wrap on smaller vieports, just add the data-uk-margin attribute to their parent container. It will automatically add the .uk-margin-small-top to the lower element.

Example










Markup

<p data-uk-margin>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</p>

NOTE By default, the data attribute adds the .uk-margin-small-top class to stacking elements. To apply a bigger margin, just add the {cls:'.uk-margin-top'} option.


Heading large

To increase the font size of your headings on tablets and desktops, just add the .uk-heading-large class.

Example

Heading

Markup

<h1 class="uk-heading-large">...<h1>

Link muted

If a link should not have the default link color, just add the .uk-link-muted class to the anchor element or the parent element.

Example

Markup

<a class="uk-link-muted">...<a>

<h1 class="uk-link-muted"><a>...<a><h1>

<ul class="uk-link-muted">
    <li><a>...<a></li>
    <li><a>...<a></li>
    <li><a>...<a></li>
</ul>

Scrollable preformatted text

Add the .uk-scrollable-text class to set a max-height and provide a vertical scrollbar. This is very useful for preformatted text, if you don’t want your code blocks to take too much space.

Example

<!-- This is sample code to demonstrate preformatted text with a scrollbar. -->

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-left">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-right">...</div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-center">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-justify">...</div>
    </div>
</div>

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-break">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box"><p class="uk-margin-remove uk-text-truncate">...</p></div>
    </div>
</div>

Scrollable box

Add the .uk-scrollable-box class to create a panel-like box which has a max-height and provides a vertical scrollbar. It can contain any kind of content.

Example

Markup

<div class="uk-scrollable-box">
    <ul class="uk-list">
        <li><label><input type="checkbox">...</label></li>
        <li><label><input type="checkbox">...</label></li>
    </ul>
</div>

Display utilities

Add one of these classes to change the display properties of an element.

Class Description
.uk-display-block Forces the element to behave like a block element.
.uk-display-inline Forces the element to behave like an inline element.
.uk-display-inline-block Forces the element to behave like an inline-block element.

Visibility utilities

Class Description
.uk-hidden Hides the element on any device.
.uk-visible-hover Displays hidden content on hover using display: block. Add this class to the parent element.
.uk-visible-hover-inline Displays hidden content on hover using display: inline-block. Add this class to the parent element.

Example

Hover me…

Bazinga!

Markup

<div class="uk-visible-hover">
    <div class="uk-hidden">...</div>
</div>

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.

Class Small (Phones)
up to 767
Medium (Tablets)
768 to 959
Large (Desktops)
960 and larger
.uk-visible-small Visible Hidden Hidden
.uk-visible-medium Hidden Visible Hidden
.uk-visible-large Hidden Hidden Visible
.uk-hidden-small Hidden Visible Visible
.uk-hidden-medium Visible Hidden Visible
.uk-hidden-large Visible Visible Hidden

Animation

A basic collection of smooth animations to use within your page.

Usage

To apply this component, add any .uk-animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Class Description
.uk-animation-fade The element fades in.
.uk-animation-scale-up The element scales up.
.uk-animation-scale-down The element scales down.
.uk-animation-slide-top The element slides in from the top.
.uk-animation-slide-bottom The element slides in from the bottom.
.uk-animation-slide-left The element slides in from the left.
.uk-animation-slide-right The element slides in from the right.

Example

Click on any of the boxes to see the animation.

Fade
Scale up
Scale down
Slide top
Slide bottom
Slide left
Slide right

Markup

<div class="uk-animation-fade">...</div>

Reverse modifier

All provided animations are fade-in animations. Add the .uk-animation-reverse class to reverse any animation and fade the element out.

Example

Click on any of the boxes to see the animation.

Fade
Scale up
Scale down
Slide top
Slide bottom
Slide left
Slide right

Markup

<div class="uk-animation-fade uk-animation-reverse">...</div>

Tooltip

Easily create a nicely looking tooltip.

Usage

To apply this component, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip’s text.

Example

Hover me

Markup

<button class="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

Alignment

Add one of the following options to the data-uk-tooltip attribute to adjust the tooltip’s alignment.

Attribute Description Example
pos:'top' Aligns the tooltip to the top.
pos:'top-left' Aligns the tooltip to the top left.
pos:'top-right' Aligns the tooltip to the top right.
pos:'bottom' Aligns the tooltip to the bottom.
pos:'bottom-left' Aligns the tooltip to the bottom left.
pos:'bottom-right' Aligns the tooltip to the bottom right.
pos:'left' Aligns the tooltip to the left.
pos:'right' Aligns the tooltip to the right.

Markup

<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

Scrollspy

Trigger events and animations while scrolling your page.

Usage

The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element.

Data attribute Description
data-uk-scrollspy="{cls:'MY-CLASS'}" Applies the class only the first time the element appears in the viewport.
data-uk-scrollspy="{cls:'MY-CLASS', repeat: true}" Applies the class everytime the element appears in the viewport.
data-uk-scrollspy="{cls:'MY-CLASS', delay:600}" Adds a delay in milliseconds to the animation.

Typically, classes from the Animation component are used together with the scrollspy.

Examples

This example uses the repeat: true option. Scroll up and down to see the triggered animations.

Fade

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale up

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Scale down

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide top

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide right

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Slide left

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Delay

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Delay

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Delay

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Delay

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Markup

<div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">...</div>

Javascript events

The scrollspy component triggers an uk.scrollspy.inview event every time an element is in the viewport and uk.scrollspy.outview when an element leaves the viewport.

Example

$('[data-uk-scrollspy]').on({

    'uk.scrollspy.inview', function(){
        console.log("Element is visible.");
    },

    'uk.scrollspy.outview', function(){
        console.log("Element is not visible.");
    }
});

Scrollspy Nav

To automatically update the active menu item in a menu depending on the scroll position of your site, just add the data attribute data-uk-scrollspy-nav to any navigation. Each menu item must link to the ID of its corresponding part of the site.

Data attribute Description
data-uk-scrollspy-nav Triggers the JavaScript necessary for the functionality of the scrollspy nav.
data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}" Looks for the closest element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
data-uk-scrollspy-nav="{smoothscroll:true}" Applies the Smooth scroll component when skipping between different sections of the site.
data-uk-scrollspy-nav="{cls:'MY-CLASS'}" By default ScrollspyNav toggles the uk-active class. Use the cls option to use your own class name.

For an example of the scrollspy nav, just check out our Scrollspy test page.

Markup

<ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">
    <li><a href="#MY-ID">...</a></li>
    <li><a href="#MY-ID2">...</a></li>
</ul>

<div id="MY-ID">...</div>
<div id="MY-ID2">...</div>

Smooth scroll

Enhance your site with a nice effect that slows down the scrolling when jumping to another part of your page.

Usage

To gradually descrease the speed when you jump from one section of your page to another, for example with a to-top scroller, just add the data-uk-smooth-scroll attribute to an <a> element.

Example

Example here

Markup

<a href="#my-id" class="uk-button" data-uk-smooth-scroll>...</a>

Want Know More?

UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.
And many more details here
….

Über Mich

Anna Einsporn - zugelassene Heilpraktikerin

Kontakt

Tostedenstr. 4, 21614 Buxtehude

+49-152-31824757

info@tcm-buxtehude.de

tcm-buxtehude.de

Öffnungszeiten

Montag - Freitag
09:00 - 19:00 Uhr nach telefonischer Vereinbarung

Social Share