ORB

ElementsExamples

Alerts and Call-outsin Default Panel

This is the info call-out

Use this call-out to bring user attention to useful info

This is the warning call-out

Use this call-out to bring user attention to warning info

This is the danger call-out

Use this call-out to bring user attention to potencially danger info

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Labels

LabelsPanel Default
Default Primary Success Info Warning Danger
Some more label colors
Pink Blue Dark Blue Green Alternative Yellow Purple Cold Grey Dark Cold Grey Orange Dark Red Black

List Groups

List groupsIn Warning panel

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Examples of Use

Basic example
  • Profile
  • Updates
  • Messages
  • Tasks
  • Comments
Linked with badges
21Cras justo odio 32Dapibus ac facilisis in Morbi leo risus 14Porta ac consectetur ac 14Vestibulum at eros
Contextual classes
Dapibus ac facilisis in Success! Cras sit amet nibh libero Information Porta ac consectetur ac Warning Vestibulum at eros Danger!

Bootstrap Navbars

NavbarsNavbars and Elements

Default navbar

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. We are not use Bootstrap Navs in ORB, but you can — so, we style them to include in theme.

Requires JavaScript

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

<nav class="navbar navbar-default" role="navigation">
...
</nav>

Make navbars accessible

Be sure to add a role="navigation" to every navbar to help with accessibility.

Modify the look of the navbar by adding .navbar-inverse.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>