CSS Components / Callouts

Callouts

The .c-callout component provides consistent styling for notifications, wells, and alerts. The callout expands to the width of it's parent block and may contain .c-callout__title and .c-callout__paragraph child elements. Callout body text should only receive paragraph styling when it wraps to multiple lines.

Callout: Standard (Multi-line)

Chicharrones brooklyn cardigan marfa pour-over craft beer dreamcatcher cold-pressed brunch meggings. Live-edge disrupt narwhal irony neutra single-origin coffee, biodiesel before they sold out roof party venmo farm-to-table direct trade poke tousled aesthetic. Prism dreamcatcher glossier cloud bread blue bottle farm-to-table celiac chicharrones single-origin coffee salvia knausgaard raclette.

Callout: Recessed (Multi-line)

Chicharrones brooklyn cardigan marfa pour-over craft beer dreamcatcher cold-pressed brunch meggings. Live-edge disrupt narwhal irony neutra single-origin coffee, biodiesel before they sold out roof party venmo farm-to-table direct trade poke tousled aesthetic. Prism dreamcatcher glossier cloud bread blue bottle farm-to-table celiac chicharrones single-origin coffee salvia knausgaard raclette.

Callout: Standard (One-line)

Paleo gochujang heirloom salvia subway tile letterpress retro.

Callout: Recessed (One-line)

Paleo gochujang heirloom salvia subway tile letterpress retro.

Callout: Standard Dialog

Paleo gochujang heirloom salvia subway tile letterpress retro.

Callout: Recessed Dialog

Paleo gochujang heirloom salvia subway tile letterpress retro.

Alerts and Notifications

Success Callout: Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Success Callout: Dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Warning Callout: Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Warning Callout: Dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Error Callout: Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Error Callout: Dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Info Callout: Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Info Callout: Dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque sapien quis purus tincidunt ultrices. Morbi rutrum, tellus et viverra tincidunt, diam ipsum laoreet risus, non tempus ligula arcu eget mi.

Close Button

Include the optional .c-callout__close child element to produce a dismissable alert.

.c-callout__close
.c-callout__close
.c-callout__close
.c-callout__close
.c-callout__close.is-hovered
.c-callout__close.is-hovered
.c-callout__close.is-hovered
.c-callout__close.is-hovered
.c-callout__close.is-focused
.c-callout__close.is-focused
.c-callout__close.is-focused
.c-callout__close.is-focused

Playground