TYPOGRAPHY (UIKIT)
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 |
<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.insidea 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-3.uk-width-1-3.uk-width-1-2.uk-width-1-2.uk-width-3-10.uk-width-7-10FLEX 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. |
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
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
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 moreCOMMENT
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. |
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.
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.
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.
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
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.
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. |
Hover over any of the boxes to see the animation.
Author
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
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.