Content Page
Icons with lines on both sides
Line Small
Line Medium
Line Large
Vertical lines for Headers
Heading 1
Heading 2
Heading 3
Heading 5
Heading 6
Circle Images
Small underline
Left Justified
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac purus tortor. Nulla efficitur, nulla id dapibus lacinia, erat lorem mattis tellus, sit amet porttitor ligula eros non magna. Morbi mattis urna a cursus tempus. Etiam ullamcorper enim nec nisl condimentum, eget porttitor dui luctus. Aenean eleifend est nec vestibulum mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan at justo id ultrices. Fusce aliquam pellentesque enim.
Right Justified
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac purus tortor. Nulla efficitur, nulla id dapibus lacinia, erat lorem mattis tellus, sit amet porttitor ligula eros non magna. Morbi mattis urna a cursus tempus. Etiam ullamcorper enim nec nisl condimentum, eget porttitor dui luctus. Aenean eleifend est nec vestibulum mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan at justo id ultrices. Fusce aliquam pellentesque enim.
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac purus tortor. Nulla efficitur, nulla id dapibus lacinia, erat lorem mattis tellus, sit amet porttitor ligula eros non magna. Morbi mattis urna a cursus tempus. Etiam ullamcorper enim nec nisl condimentum, eget porttitor dui luctus. Aenean eleifend est nec vestibulum mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan at justo id ultrices. Fusce aliquam pellentesque enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac purus tortor. Nulla efficitur, nulla id dapibus lacinia, erat lorem mattis tellus, sit amet porttitor ligula eros non magna. Morbi mattis urna a cursus tempus. Etiam ullamcorper enim nec nisl condimentum, eget porttitor dui luctus. Aenean eleifend est nec vestibulum mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan at justo id ultrices. Fusce aliquam pellentesque enim.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Uk Panel Box Primary
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Box Link
Uk Panel Box Secondary
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Box Link
Panel header
Add the .uk-panel-header class to separate the panel title and content with a horizontal line.
Example
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-header
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-header
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit..uk-panel-header
Panel box with teaser
To display an image inside a panel box that is attached to the border of the panel without any spacing, just add the .uk-panel-teaser class to a <div> element inside the panel.
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.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-10Medium gutter
To apply a medium sized gutter between grid columns, just add the .uk-grid-medium class.
Example
Small gutter
To apply a smaller gutter between grid columns, just add the .uk-grid-small class.
Example
Collapse gutter
To remove the gutter entirely, just add the .uk-grid-collapse class.
Example
List striped
Add zebra-striping to a list using the .uk-list-striped class.
Example
- List item 1
- List item 2
- List item 3
Add the .uk-list-line class to separate list items with lines.
Example
- List item 1
- List item 2
- List item 3
List with no dots but bigger line height
Add a ul class.uk-list-no-dot
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
List With Check Marks
Add a ul class.uk-check-list
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
List With Check Square Marks
Add a ul class.uk-check-list-square
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
Add a ul class.uk-list-no-margin
List With No Margin
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
List space
Add the .uk-list-space class to increase the spacing between list items.
Example
- This modifier may be useful for for list items with multiple lines of text.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco.
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data |