UI Elements
HTML & CSS Library
Navbar
Typography (An Overview)
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:
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-
Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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, LLC6125 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.
Content Formatting
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?
Page Header
Mauris et dolor tortor Proin rhoncus condimentum
Forms
Input States
Input Groups
Buttons
Disabled State
Active State
Tables
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 |
Labels
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
Badges
Navs
Alerts
Progress Bars
Contextual alternatives
Striped
Stacked
List Groups
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum iaculis, lectus feugiat vulputate vehicula, turpis nibh tincidunt odio, vitae pellentesque nibh lorem ac libero
- Vestibulum rutrum ipsum a eleifend sodales
- Proin rhoncus condimentum
- Vestibulum at eros
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Modals
Panels
Panel title
Panel title
Wells
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.