HOPE UI - DESIGN SYSTEM

PRODUCTION READY FREE OPEN SOURCE DASHBOARD UI KIT AND DESIGN SYSTEM.

Dashboard Demo

star us us on github

Components

Accordion

Documentation
  • This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
  • This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
  • This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Documentation
A simple primary alert with an example link . Give it a click if you like.
A simple primary alert with an example link. Give it a click if you like.
An example alert with an icon
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon
This is a success alert—check it out!
This is a info alert—check it out!
This is a warning alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a warning alert—check it out!
Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Badges

Documentation

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

Documentation

Buttons

Documentation

Button Groups

Documentation

Calendar

Documentation

Card

Documentation
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go Somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go Somewhere
2 days ago
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Card link Another link
Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Carousel

Documentation
First slide

First slide label

Some representative placeholder content for First slide

Second slide

second slide label

Some representative placeholder content for Second slide

Third slide

Third slide label

Some representative placeholder content for Third slide

Dropdowns

Documentation

List Groups

Documentation

Modal

Documentation
Modal title

I will not close if you click outside me. Don't even try to press escape key.

Full screen modal

...

Navs

Documentation

Navbar

Documentation

Offcanvas

Documentation

Pagination

Documentation

Popovers

Documentation

Progress

Documentation
0%
25%
50%
75%
100%
40%
40%
40%

Scrollspy

Documentation
Navbar

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.


Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Spinner

Documentation

Toasts

Documentation

Bootstrap

11 mins ago

Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.

Tooltips

Documentation

Forms

Overview

Documentation
We'll never share your email with anyone else.
Default Radio
Another Rdio

Disabled Forms

Documentation

Sizing

Documentation

Input Groups

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

Alertnate Input

Documentation
@
@

Floating Labels

Documentation

Alertnate Float Labels

Documentation

Toggle Button

Documentation
Example Range

Validation

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.

Content

Typography

Documentation

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they're displayed inline.

Images

Documentation
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

Table

Documentation
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Figures

Documentation
Placeholder 400x300
A caption for the above image.