AGP Digital Marketing is the best digital marketing agency for your credit union or non-profit

menu

Cheat Sheet

Columns

Markup

<div class="uk-column-small-1-2 uk-column-medium-1-3 uk-column-large-1-4">...</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat justo turpis, sed tempor sapien iaculis venenatis. Nam lectus lacus, convallis vitae dignissim interdum, commodo viverra enim. Pellentesque in ligula quis diam auctor scelerisque a in neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tempus ultricies nunc, sit amet tincidunt lorem molestie vitae. Pellentesque hendrerit lorem id est finibus sodales. Vivamus et ultrices sapien, sit amet volutpat nisl.

Aenean vel sagittis odio. Donec et libero eu lacus cursus tincidunt. In non eros odio. Pellentesque tincidunt risus non ultrices sollicitudin. Duis imperdiet mi eget erat fermentum tincidunt. Donec vestibulum odio at lorem tempor ullamcorper. Quisque sed erat sed lacus gravida facilisis. Nulla facilisi. Integer congue lobortis nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse in tellus quis sapien pellentesque tempor vel sed diam. Proin bibendum lobortis sem, ut pellentesque erat eleifend vel.


Blocks

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

Markup

<div class="uk-block">...</div>

Modifiers

To apply different background colors and paddings, add one of the following classes.

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

NOTE To properly display colors, borders and other elements on colored blocks, you might want to add the .uk-contrast class.

Examples

Primary

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

Secondary

This block is usually dark

Muted

This block is usually light gray

Buttons

Markup

<button class="uk-button uk-button-[color-modifier] uk-button-[size-modifier]">...</button>

Utilities

Display

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

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

Inline List example,

  • Inline List item
  • Inline List item 2
  • Inline List item 3

Tables

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

Usage

To apply this component, add the .uk-table class to a <table> 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 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>

Responsive Table

If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div> element and add the .uk-overflow-container class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.

Example

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data

Markup

<div class="uk-overflow-container">
<table>...</table>
</div>

Headings

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

Example

h1 Heading 1 - Default: 36px

h2 Heading 2 - Default: 24px

h3 Heading 3 - Default: 18px

h4 Heading 4 - Default: 16px

h5 Heading 5 - Default: 14px
h6 Heading 6 - Default: 12px

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.

Get Help For Your Unique Business Needs

Let's have a chat about how AGP can help you.

GET IN TOUCH