Callouts
Examples of Standard, Stacked, and Chevron Callouts, and subcomponents such as Roof Icon and Label.
Refer to Simple Styleguide for non-templated callout options such as Alert/Error and making callouts dismissible.
Copy Callout Card
This is a medium bordered callout with a white background.
This is a medium bordered callout with a concrete background.
This is a medium callout with a white background.
This is a medium callout with a blue background.
This is a medium callout with a charcoal background.
This is a medium callout with a concrete background.
This is a medium callout with a navy background.
This is a medium callout with a green background.
This is a medium callout with a teal background.
This is a medium callout with an orange background.
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.
Document Management System
MultiSuite® for Investor Reporting
Copy Callout Card Size Options
These sizes can be used with any of the copy callouts with solid color backgrounds.
I'm a small callout with a blue background.
I'm a medium callout with a blue background.
I'm a large callout with a blue background.
I'm an xlarge callout with a blue background.
I'm a blue callout with small-to-medium padding which means that I have less padding at mobile and a little bit more at desktop sizes.
I'm a custom option typically limited in use to landing pages.
I'm a blue callout with small-to-large padding which means that I have less padding at mobile and more padding at desktop sizes.
I'm a custom option typically limited in use to landing pages.
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>
Lorem Ipsum Green Roof
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem Ipsum Green Roof
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem Ipsum White Roof
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem Ipsum Navy Roof
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
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>
Title
Callout Text.
Title
Callout Text.
Title
Callout Text.
Title
Callout Text.