Introduction

Welcome to the Flamingo test page! You will find examples of components that Flamingo customizes on this page.

Flamingo is an extension of the Twitter Bootstrap framework. For more complete documentation on Bootstrap styles, visit their documentation.

Headings

All HTML headings, <h1> through <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.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading 7

Big Number

Text Utilities

In addition to Bootstrap's text utilities and color utilities, Flamingo offers a few extra utilities.

Example
Light weight font.
Default font.
Medium weight font.
Bold weight font.

.text-reward color

Hover Utilities

Hover utilities allow us to apply default hover styles to any markup element.

Example
Hover over me! (Primary)
Hover over me! (Secondary)

Background Color Utilities

In addition to Bootstrap's backgrounds, Flamingo offers a few extra backgrounds.

Example

Light gray background matches the navbar-utility. Use this for headers that divide content sections on mobile.

ADA AA compliant with standard font color.

OnShift gray background. Use this for drawing attention with inverted colors.

ADA AA compliant with white font (use .text-inverse class for white font)

OnShift primary background. (Use case definition needed)

ADA AA compliant with white font (use .text-inverse class for white font)

Alerts

OnShift customized alerts usage.

Example

Panels

OnShift customize panels.

Example
Default Panel
body...
Plain Panel
body...

Contact Cards

Cards used specifically for contacts/employee information.

Example
Janet Doe, CNA

This contact does not have a left stick indicator, but does have a message block and badge.

Send a Message
Jane Doe, CNA

This contact has a left stick good indicator color and a disabled message block.

Send a Message
Jan Doe, CNA

This contact has a left stick ok indicator color.

Jon Doe, CNA

This contact has a left stick neutral indicator color.

John Doe, CNA

This contact has a left stick caution indicator color.

Joe Doe, CNA

This contact has a left stick bad indicator color.

Stepper

For indicating progress in a finite step process.

Example
Steps in progress (Default)
3 out of 4 steps completed.
Steps in progress (Warning)
3 out of 4 steps completed.
Steps in progress (Info)
3 out of 7 steps completed.
Steps in progress (Danger)
2 out of 4 steps completed.
Steps completed
5 out of 5 steps completed.

Images

Image Circle

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.

Example
Original Image

Circular Image
50x50
64x64
96x96
128x128

Image Action Hover

Include a hoverable action overlay on an image's bottom right corner.

Example

JavaScript

Modals

JavaScript usage the same as Bootstrap's modals. Make sure to include bootstrap.js on the page.

Example