Provides the default style for all HTML elements.
This component defines the base look of your page. It offers great typography por 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.
Note Basically UIkit utilizes the famous Normalize.css, but distributed it among all components. Only the necessary parts are adopted into the Base component to keep the unprefixed CSS as small as possible. Most of the normalization related CSS is moved into the Form, Button and Table components. This makes UIkit and its components very robust against conflicts with other CSS frameworks so that you don’t have to worry about browser inconsistencies in your projects.
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 |
<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. |
Horizontal rule
Create a horizontal rule por 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.
Listas
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
- Item 1
- Item 2
- Item 1
- Item 2
- Item 1
- Item 2
- Item 3
- 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>Responsive images
All images in UIkit are responsive por 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.