草榴社区

Callouts

Places your content in a white box with a shadow and includes a subtle left border color accent. The Subtitle will match its color to the Accent Color as well.

Try to avoid the “Yellow” accent color option for Callouts. The yellow color is difficult to read on a white background.

Callout - Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.

Callout - Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.

Callout - Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.

Callout - Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.

Callout - Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.

Callout - Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.

Callout - Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, omnis eius autem vel soluta, a aperiam ad aspernatur voluptatem sed minima! Necessitatibus, fugiat cumque, hic officia earum nisi ut sequi voluptas enim, quisquam consequuntur commodi ducimus illo reiciendis ea omnis.

Scroll to Top