Basic Panels

For various sections of a page. Add the .panel class to apply a white background and a subtle shadow. Manually apply padding and margins appropriately.

Cards

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

View

Consectetur Elit

Velit saepe, aspernatur ipsa? Dolores sint harum dolorem quod tempore.

View

A variation of a panel, use for card-based item lists.

Options

• .hover-em : darkened shadow emphasis when hovering over.

Labels

Use .label on a <span> element. Does not support other elements other than <span> to minimize the Petal style being inherited in project-specific classes because it is a rather commonly used class name.

Append emphasis classes .accent, .okay, .warning, .danger for color variations.

.white will make inverted color with a white background and black text; append the emphasis classes listed above with .white and it will change the text colors instead.

Badges

Same thing as labels, just change it to .badge. Applies to <span> only.

Customizable options

// panels
@panel-bg-color-light: @background-color-light;
@panel-bg-color-dark: @gray-d4;
@panel-border-radius: 0;
@label-border-radius: 0;
@label-badge-bg-color: @gray;
@badge-border-radius: 10em;