Base Typography

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.

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.

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

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