UIKIT DEFAULTS

These components generally normalize HTML elements for cross browser functionality and add some very basic styling.

HEADINGS

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

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5

h6 Heading 6

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cum eaque possimus delectus accusamus a, repellat reprehenderit odit tempora unde, consectetur in, assumenda odio dolore beatae optio sed accusantium iste. 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.

BLOCKQUOTES

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

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.

UIKIT LAYOUT

Apply our fully responsive fluid grid system and panels, common layout parts like blog articles and comments and useful utility classes.

UIKIT 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. It is also possible to combine the grid with classes from the Flex component, although it works only in modern browsers.

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.

.uk-width-1-3

.uk-width-1-2

.uk-width-3-10

.uk-width-7-10

FLEX AND GRID

Flex Grid Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

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. Get more option to visit Grid component.

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

Hot

Title

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

New

Title

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

Populer

Title

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

PANEL WITH ICON

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.

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.

UIKIT BLOCK

Separate content sections by bundling them in blocks with different styles.

To apply this component, just add the .uk-block class to a container element.

To apply different background colors and paddings, add one of the following classes. If two consecutive blocks have the same background color, the padding will automatically be divided.

Class	Description
`.uk-block-default`	Add the default background color, usually white or similar.
`.uk-block-muted`	Adds a light background color.
`.uk-block-primary`	Adds a primary background color.
`.uk-block-secondary`	Adds a another background color, usually a dark one.

Block

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

UIKIT ARTICLE

Create articles within your page.

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.

Article title

Written by Super User on 12 April 2012. Posted in Blog

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.

COMMENT

Create comments, for example about articles.

The Comment component consists of a comment header, including an avatar, a title and meta data, and a comment body.

Class	Description
`.uk-comment`	Add this class to define the Comment component.
`.uk-comment-header`	Add this class to create a comment header.
`.uk-comment-avatar`	Add this class to an `<img>` element to create an avatar for the comment author.
`.uk-comment-title`	Add this class to a heading to create a comment title.
`.uk-comment-meta`	Add this class to a paragraph to create meta data about your comment.
`.uk-comment-body`	Add this class to a `<div>` element to create comment body.

Author

12 days ago | Profile | #

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- Author
  
  12 days ago | Profile | #
  
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

UIKIT COMMON

Here you'll find components that you often use within your content, like buttons, icons, badges, overlays, animations and much more.

BUTTON

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

To apply this component, add the .uk-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Link

COLOR MODIFIERS

There are several color modifiers available. Just add one of the following classes to apply a different look.

Example	Class	Description
	`.uk-button-primary`	Emphasizes to identify the primary action in a set of buttons.
	`.uk-button-success`	Indicates a successful or positive action.
	`.uk-button-danger`	Indicates a dangerous or negative action.
Link	`.uk-button-link`	Deemphasizes to look like a link while maintaining button behavior.

SIZE MODIFIERS

Add the .uk-button-mini, .uk-button-small or .uk-button-large class to a button to make it smaller or larger.

FULL WIDTH BUTTON

Add the .uk-width-1-1 class from the Grid component and the button will take up full width.

BUTTON GROUP

To create a button group, add the .uk-button-group class to a <div> element around the buttons. That's it! No further markup needed.

Link

BUTTON WITH DROPDOWNS

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .uk-button-dropdown class and the data-uk-dropdown attribute to a <div> element that contains the button and the dropdown itself.

UIKIT ALERT

Defines styles for success, warning and error messages.

To apply this component, add the .uk-alert class to a block element.

To apply a close button, add the .uk-alert-close class to a <button> or <a> element inside the alert box. To enable the JavaScript for the close button, just add the data-uk-alert attribute to the alert box. We recommend adding the .uk-close class from the Close component to give the button a proper styling, though you can also use text or an image. More option visit Uikit Alert.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

To indicate success or a positive message add the .uk-alert-success class.

To indicate a message containing a warning add the .uk-alert-warning class.

To indicate an important message add the .uk-alert-danger class.

SIZE MODIFIER

Add the .uk-alert-large class to increase the spacing in an alert box. This can be useful, if you want to use richer typography.

Today's headline

UIKIT ANIMATION

A basic collection of smooth animations to use within your page. For more options please visit Uikit Animation

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.
`.uk-animation-shake`	The element shakes.
`.uk-animation-scale`	The element scales down without fading in.