This is a style guide showcasing common HTML elements.
Palette
Stratos
#000F39
Astronaut
#2A3177
Science Blue
#0163BB
Dark Blue
#0320DA
Link Water
#e8f0f9
Whisper
#eeeff7
Aqua Haze
#F0F4F7
Hawkes Blue
#cfd5fd
Feijoa
#A6E08A
Monza
#DB0020
Tarawera
#094364
Bahama Blue
#015E94
Boston Blue
#3596C8
Jungle Green
#20A096
Jewel
#137950
Jet Stream
#BBDAD6
Aqua Squeeze
#E2F1EF
Chathams Blue
#136681
Apple Blossom
#AB3F3E
Jet Stream
#BBDAD6
Kimberly
#6e729b
FontAwesome Icons
handshake
\f4c6
bullhorn
\f0a1
broadcast-tower
\f519
glasses
\f5f5
icon-diet-food
\ea06
gas-pump
\f52f
tint
\f043
icon-heartbeat
\f21e
chair-office
\f6c1
piggy-bank
\f4d3
tree-alt
\f400
award
\f559
tooth
\f5c9
wheelchair-2
\f193
chart network
\f78a
arrow-circle-up
\f0aa
arrow-circle-down
\f0ab
arrow-circle-left
\f0a8
arrow-circle-right
\f0a9
times-circle
\f057
clock
\f017
sort
\f0dc
file-certificate
\f5f3
linkedin-square
\f08c
facebook-square
\ea1c
vimeo
\f40a
\f16d
Font Awesome Icon Sizing
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
Typography
Roboto Light 300
Roboto Regular 400
Roboto Medium 500
Roboto Bold 700
Roboto Black 900
Muli
Muli
Headers
| Example | REM | PX |
|---|---|---|
Header 1 |
3.125rem | 50px |
Header 2 |
2.375rem | 38px |
Header 3 |
1.75rem | 28px |
Header 4 |
1.25rem | 20px |
Header 5 |
1.063rem | 17px |
Header 6 |
0.9375rem | 15px |
Body Text
Lead Paragraph/Intro
Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiatadipisicing ex in dolore ullamco.
Standard Paragraph
Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiatadipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecatdeserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse cupidatatid consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sintdolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.Lists
Unordered List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
List Unstyled with Media Object
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Text Emphasis Classes
- .text-muted
- .text-primary
- .text-warning
- .text-danger
- .text-success
- .text-info
Code
I like to<code>. Pre
/* I also like multi-line code */ body { font-size: 16px; color: #333; ... }
Buttons
Tables
| Table Heading | Table Heading | Table Heading | Table Heading |
|---|---|---|---|
| Table Footer | Table Footer | Table Footer | Table Footer |
Table Data a element .uk-table |
Table Data Button | Table Data  |
Table Data |
| Table Data | Table Data | Table Data | Table Data |
| Active Row | Active Row | Active Row | Active Row |
| Table Data | Table Data | Table Data | Table Data |
| Table Sub Heading | Table Sub Heading | Table Sub Heading | Table Sub Heading |
| Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data |
Table Divider
| Table Heading | Table Heading | Table Heading |
|---|---|---|
Table Data a element .uk-table |
Table Data Button | Table Data |
| Table Data | Table Data | Table Data |
| Active Row | Active Row | Active Row |
| Table Data | Table Data | Table Data |
| Table Sub Heading | Table Sub Heading | Table Sub Heading |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
Table Striped
| Table Heading | Table Heading | Table Heading |
|---|---|---|
Table Data a element .uk-table |
Table Data Button | Table Data |
| Table Data | Table Data | Table Data |
| Active Row | Active Row | Active Row |
| Table Data | Table Data | Table Data |
| Table Sub Heading | Table Sub Heading | Table Sub Heading |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
Widths
| Expand | Truncate | Width Medium | Shrink + Nowrap | ||
|---|---|---|---|---|---|
 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor | |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor | |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor | |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor |
Responsive
| Expand | Truncate | Width Medium | Shrink + Nowrap | ||
|---|---|---|---|---|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor | |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor | |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor | |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor |
Forms
Horizontal
Sizes
Widths
Icon
Select
Radio, Checkbox and Select
Custom Controls
Note The hover and focus state for uk-form-custom are not styled by default, but you could use the adjacent sibling selector to do so.
JavaScript Options
| Option | Value | Default | Description |
|---|---|---|---|
target |
CSS selector | Boolean | false | Value display target. |
Thumbnails
Badges
1 100Dropdown
Position
JavaScript Options
| Option | Value | Default | Description |
|---|---|---|---|
toggle |
String, Boolean | ‘- *’ | CSS selector for the element to be used as toggle. By default, the preceding element is used. |
pos |
String | ‘bottom-left’ | Dropdown position. |
mode |
hover | click | click,hover | Comma separated list of dropdown trigger behaviour modes. |
delay-show |
Number | 0 | Delay time in hover mode before a Dropdown is shown in ms. |
delay-hide |
Number | 800 | Delay time in hover mode before a Dropdown is hidden in ms. |
boundary |
CSS selector | window | Referenced element to keep Dropdown’s visibility. |
boundary-align |
Boolean | false | Align Drop to boundary. |
flip |
false|true|’x’|’y’ | true | Automatic Dropdown flip. |
cls |
String | ‘uk-dropdown’ | The Dropdown container class. |
offset |
Number | 0 | The offset of the Dropdown container. |
animation |
String | false | The space separated names of animations to use. |
duration |
Number | 200 | The animation duration. |
Navs
Navbars
Breadcrumbs
Pagination
Default
Alerts
Progress bars
List groups
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
- Dapibus ac facilisis in
- This is a primary list group item
- This is a secondary list group item
- This is a success list group item
- This is a danger list group item
- This is a warning list group item
- This is a info list group item
- This is a light list group item
- This is a dark list group item
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.CardsReplacing panels, wells and thumbnails
Primary card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Carousel
Accordion
-
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Item 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
-
Item 3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.
Tabs
- Hello!
- Hello again!
- Bazinga!
Modals
Tooltips