GroundworkCSS

UI Elements

Common UI elements that provide user feedback or call users to take action.

Message Boxes

This is an important message.

This is an info message.

This is a success message.

This is an alert message.

This is a warning message.

This is an error message.

This is a disabled message.

This is a dismissible message.

Colors

This is a yellow message.

This is an orange message.

This is a red message.

This is a pink message.

This is a purple message.

This is an asphalt message.

This is a blue message.

This is a turquoise message.

This is a green message.

Callout Boxes

This is a default callout box

Use these to contain or call attention to special content.

This is an info callout box

Use these to contain or call attention to special content.

This is a success callout box

Use these to communicate multi-element success messages as a block.

This is an alert callout box

Use these to contain or call attention to special content.

This is a warning callout box

Use these to contain or call attention to special content.

This is an error callout box

Use these to contain or call attention to special content.

This is a disabled callout box

Use these to contain or call attention to special content.

This is a dismissible callout box

Use these to contain or call attention to special content.

Colors

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

This is a callout box

Use these to contain or call attention to special content.

Square Boxes

This is an info message.

This is an info callout box

Use these to contain or call attention to special content.

Round Boxes

This is a round info message.

This is a round info callout box

Use these to contain or call attention to special content.