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)

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

Warning Callout: Well

Warning Callout: Dialog

Error Callout: Well

Error Callout: Dialog

Info Callout: Well

Info Callout: Dialog

Close Button

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

.c-callout__close

.c-callout__close.is-hovered

.c-callout__close.is-focused

Playground

<div class="c-callout c-callout--info c-callout--recessed">
  <button aria-label="close" class="c-callout__close"></button>
  <strong class="c-callout__title">Callout Title</strong>
  <p class="c-callout__paragraph">Taxidermy tousled listicle tilde. Tattooed
  pork belly gochujang, skateboard iceland portland man braid paleo letterpress
  normcore yuccie poke wayfarers photo booth vegan. Meggings seitan narwhal
  pop-up echo park salvia ennui messenger bag PBR&B cold-pressed. Next level
  ennui four dollar toast yr edison bulb single-origin coffee godard hexagon
  locavore literally cray hella whatever.</p>
  <p class="c-callout__paragraph">Chicharrones af try-hard, mlkshk lo-fi meh
  art party street art. Chillwave tilde glossier subway tile try-hard
  helvetica. Dreamcatcher ennui ethical PBR&B chartreuse kitsch. Ugh
  gluten-free ramps, farm-to-table 3 wolf moon echo park live-edge artisan
  adaptogen. Green juice tofu live-edge, unicorn locavore literally twee
  gluten-free vaporware. Tattooed af 8-bit, scenester shoreditch chillwave
  ennui beard bushwick austin salvia brunch.</p>
  <p class="c-callout__paragraph">Echo park fixie sriracha, chillwave 3 wolf
  moon edison bulb sustainable blue bottle. Selfies cornhole echo park
  try-hard. Poutine godard food truck pabst williamsburg cornhole mlkshk vape.
  Craft beer VHS bushwick swag, palo santo hashtag cronut hammock venmo. Marfa
  kale chips taiyaki edison bulb art party unicorn keffiyeh next level copper
  mug disrupt photo booth leggings. Meh helvetica four loko truffaut bicycle
  rights brooklyn four dollar toast affogato slow-carb selfies authentic
  salvia.</p>
</div>