UI Elements

HTML & CSS Library

UI elements page example template

A quick preview of everything we have to offer.

It's a button!

This is the primary heading and there should only be one of these per page

A small paragraph to emphasis and show important bits.

Phasellus tempus ex non sem imperdiet congue eu vel leo. In sed magna rutrum, tristique ante ac, gravida lacus. Aliquam erat volutpat. Nunc mattis a lectus eu aliquet.

  • This is a list item
  • So is this - there could be more
  • Make sure to style list items to:
    • Not forgetting child list items
    • Not forgetting child list items
    • And, keep in mind:
      • The children of those children
      • The children of those children
      • The children of those children
    • Not forgetting child list items
    • Not forgetting child list items
    • Not forgetting child list items
  • A couple more
  • top level list items

Aenean volutpat faucibus placerat. Nulla tristique dui quam, at dapibus ipsum fermentum quis. Vestibulum sed nibh quis tortor laoreet convallis.


Don't forget Ordered lists:

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. Aliquam tincidunt mauris eu risus.

Donec rutrum augue nec odio sagittis pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, commodo vitae, per inceptos himenaeos. Ut efficitur eleifend maximus. Aliquam at lectus porttitor, commodo eros ac, bibendum leo. Etiam commodo nunc et commodo pharetra.

A sub heading which is not as important as the first, but is quite imporant overall

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

# Lorem ipsum dolor Fusce Aenean id metus
1 Etiam ultrices Phasellus Praesent fermentum
2 Nunc tincidunt Nullam tellus Curabitur
3 Mauris consequat Maecenas quis tellus tellus Nunc

Aenean a urna diam. Nunc sit amet urna quis lorem imperdiet porta. Fusce pulvinar augue ac sapien malesuada, nec sagittis odio condimentum. Aliquam tempor porta augue non venenatis.

A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


Pellentesque sed magna a risus venenatis pellentesque. Aenean nec tincidunt felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at ex nec diam sagittis iaculis sed sit amet tellus.

A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 #header h1 a {
         display: block;
         width: 300px;
         height: 80px;
     }

Nullam consequat quam scelerisque nulla posuere, quis maximus dui dictum. Nunc lobortis hendrerit congue. Donec eu lorem tempus, porttitor ex ac, sagittis elit. Maecenas ullamcorper a felis sit amet condimentum. Etiam dapibus iaculis rhoncus. Pellentesque et ipsum metus.

A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et, commodo vitae, netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”

Some Great Guy

Vestibulum sed nibh quis tortor laoreet convallis. Proin at maximus velit. Etiam a lorem nec dui sodales elementum.

This heading plays a relatively small bit part role, if you use it at all

Donec rutrum augue nec odio sagittis pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

User10, LLC
6125 E Indian School Rd, Suite 2000
Scottsdale, AZ 85251
P: (123) 456-7890
Full Name
first.last@example.com

Sed malesuada ligula eu erat porttitor fringilla. Nullam vel congue ipsum. Donec tristique metus eu nisl vehicula, sed facilisis felis suscipit. Ut iaculis faucibus risus, nec tempor felis euismod vitae. Ut non elit sit amet tortor aliquet convallis vitae in quam.

This is an ordinary paragraph that is long enough to wrap to multiple lines so that you can see how the line spacing looks. Proin rhoncus condimentum nisl, in dapibus ipsum tempus et. Maecenas vitae ornare tortor. Maecenas ac faucibus libero, eu accumsan sem.

This is a lead paragraph.

Muted color paragraph.

Warning color paragraph.

Danger color paragraph.

Info color paragraph.

Success color paragraph.

This is text in a small wrapper. NBD, right?

Fieldset Legend

Example .help-block text


Input States

Warning!
Error!
Success!

Input Groups

$ .00
@example.com

Disabled State

Active State

Basic Example

# Lorem ipsum dolor Fusce Aenean id metus
1 Etiam ultrices Phasellus Praesent fermentum
2 Nunc tincidunt Nullam tellus Curabitur
3 Mauris consequat Maecenas quis tellus tellus Nunc

Striped Rows with hover

# Lorem ipsum dolor Fusce Aenean id metus
1 Etiam ultrices Phasellus Praesent fermentum
2 Nunc tincidunt Nullam tellus Curabitur
3 Mauris consequat Maecenas quis tellus tellus Nunc

Bordered Table

# Lorem ipsum dolor Fusce Aenean id metus
1 Etiam ultrices Phasellus Praesent fermentum
2 Nunc tincidunt Nullam tellus Curabitur
3 Mauris consequat Maecenas quis tellus tellus Nunc

Condensed Table

# Lorem ipsum dolor Fusce Aenean id metus
1 Etiam ultrices Phasellus Praesent fermentum
2 Nunc tincidunt Nullam tellus Curabitur
3 Mauris consequat Maecenas quis tellus tellus Nunc

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Inbox 42

60% Complete
60% Complete

Contextual alternatives

.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger

Striped

40% Complete (success)
45% Complete

Stacked

35%
20%
10%

Panel title

Panel content

Panel title

Panel content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.