Alerts
Header level (see above)
Header level alerts go between the header and content and span the width of the window. Icons and buttons are optional. Dismissable alerts become sticky to the top of the window once you scroll down far enough. They have a dark background.
Page level (see above)
Page level alerts are the first item at the top of the content area and go the content and width of the content area. They have a dark background.
Section level
Section level alerts usually are at the top of a section, but can be inserted anywhere. They fill op the width of their parent container. They can contain any trpe of content. However, if it's just one line, it is structured and styled slightly differently. They have a light background.
- Lorem ipsum dolor sit amet, erant dolor phaedrum.
- Lorem ipsum dolor sit amet, erant dolor phaedrum ad vel, usu mundi consequuntur ne. In pri ceteros pericula argumentum, at eum veri congue consequat, no quot nibh mea. Natum aliquam pericula at vis, congue efficiendi cu mea. Tibique commune gubergren et usu, usu ne sadipscing voluptatibus comprehensam, te wisi tritani his. Ornatus comprehensam eu sed, sit nisl eruditi ocurreret.
Lorem ipsum dolor sit amet, erant dolor phaedrum ad vel, usu mundi consequuntur ne. In pri ceteros pericula argumentum, at eum veri congue consequat, no quot nibh mea. Natum aliquam pericula at vis, congue efficiendi cu mea. Tibique commune gubergren et usu, usu ne sadipscing voluptatibus comprehensam, te wisi tritani his. Ornatus comprehensam eu sed, sit nisl eruditi ocurreret.
- Lorem ipsum dolor sit amet, erant dolor phaedrum.
- Lorem ipsum dolor sit amet, erant dolor phaedrum.
- Lorem ipsum dolor sit amet, erant dolor phaedrum.
Inline level - Text
A description that is placed right next to the error. No icon. Example: Your Order cart.
- Lorem ipsum dolor sit amet, erant dolor phaedrum.
Inline level - Input
With label
The label is red with a "warning" icon and the input gets a red border. The icon is present, but hidden, unless .has-error is on the parent.
Without label - Inline
When the input has a set width. The red "warning" icon goes to the left of the input gets a red border.
Without label - Position Absolute.
When input fills the width of it's container (set to width: 100%)
Radio
Inline level - Rich Text
Inline level with rich text alerts are for when somehting has not loaded on the page. This fills the spot where the content should be.
Something is unable to be loaded
We’re sorry for the inconvenience. Lorem ipsum dolor sit amet consect adipiscing elit verbose.
Please refresh the page or try back at a later time.
Refresh page