Welcome to the Flamingo test page! You will find examples of components that Flamingo customizes on this page.
All HTML headings,
<h6>, are available. .h1 through .h7 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
In addition, the
.big-number class provides a utility for a font size bigger than
h1 since some fonts display numbers smaller.
In addition to Bootstrap's text utilities, Flamingo offers a few extra utilities.
Hover utilities allow us to apply default hover styles to any markup element.
In addition to Bootstrap's contextual backgrounds, Flamingo offers a few extra backgrounds.
OnShift customized alerts usage.
This is an error alert message. With a link!
This is a success alert message. With a link!
This is an info alert message. With a link!
This is a warn alert message. With a link!
As messages grow longer, alert-left grows with them. Always put alert message content in one container for correct formatting.
OnShift customize panels.
Cards used specifically for contacts/employee information.
This contact does not have a left stick indicator, but does have a message block and badge.
This contact has a left stick good indicator color and a disabled message block.
This contact has a left stick ok indicator color.
This contact has a left stick neutral indicator color.
This contact has a left stick caution indicator color.
This contact has a left stick bad indicator color.
For indicating progress in a finite step process.
Flamingo extends Bootstrap's
.img-circle class to make it more friendly to images that don't already have a 1:1 ratio.
.img-circle can be used in conjunction with a background-image inline style so that the image is centered within a circular overlay. Inspect the example code to see the HTML.
Image Action Hover
Include a hoverable action overlay on an image's bottom right corner.