Examples of Standard, Stacked, and Chevron Callouts, and subcomponents such as Roof Icon and Label.
Copy Callout Card
Stacked Callouts (a.k.a. Application Cards)
These components are created by nesting 2-columns inside of 2-columns. The inner columns should have data-equalizer disabled, and should be set to stack at all widths.
Inside the stacked column, add 2 callouts.
- The first callout should be set to no margin, size small, and background blue (or navy). It creates the appearance of a heading to the next callout.
- The second callout should be set to standard size and background concrete with data-equalizer enabled.
Copy Callout Card Size Options
These sizes can be used with any of the copy callouts with solid color backgrounds.
Copy callout Card with Roof Icon
- To add a green roof icon to callouts with light backgrounds, add this markup to the callout.
<div class="roofline-top-right"><!-- roofline --></div>
- To add a white roof icon to callouts with dark backgrounds, add this markup to the callout.
<div class="roofline-top-right-white"><!-- roofline --></div>
- To add a navy roof icon to callouts with light backgrounds, add this markup to the callout.
<div class="roofline-top-right-navy"><!-- roofline --></div>
Copy Callout Cards With Labels
- To add a label to a concrete callout, add this markup. Labels can use any of these background colors: blue, navy, green, teal.
<div class="background-blue label weight-bold">Callout Label</div>