Light Callout Cards
Callout Card – Stacked (Light)
Use this card for:
- Light background areas
- Calling out one or more potential user actions
- 2-5 column card grids with other related callouts and actions
- Stand-alone action highlight areas
Do not use this card for:
- Dark background areas
- Static content with no related website actions
- Static gridded content with no related website actions
Below are samples of configurations available for this card.
Callout Card – Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
- CTA Text
1
Callout Card – Number Marker
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
- CTA Text
Callout Card – Logo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
- CTA Text
Callout Card – Full-width Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
- CTA Text
Callout Card – Portrait
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada. Phasellus faucibus, enim aliquet aliquet hendrerit, sapien lorem consectetur velit, vitae porttitor metus est eu ligula.
- CTA Text
Callout Card – Multiple Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada. Phasellus faucibus, enim aliquet aliquet hendrerit, sapien lorem consectetur velit, vitae porttitor metus est eu ligula.
- CTA Text 1
- CTA Text 2
Top Pill 3
Callout Card – Pillboxes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada. Phasellus faucibus, enim aliquet aliquet hendrerit, sapien lorem consectetur velit, vitae porttitor metus est eu ligula.
- CTA Text
Callout Card – Details and Subtext
Details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada. Phasellus faucibus, enim aliquet aliquet hendrerit, sapien lorem consectetur velit, vitae porttitor metus est eu ligula.
Subtext
- CTA Text
Callout Card – Checklist
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
Subheading
- List item 2
- List item 3
- CTA Text
Callout Card – Horizontal (Light)
Use this card for:
- Light background areas
- Calling out a potential user action
- 1-2 column card grids with other related callouts and actions
Do not use this card for:
- Dark background areas
- Static content with no related website action
- Stand-alone action highlight areas
Below are samples of configurations available for this card.
Callout Card – Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
1
Callout Card – Number Marker
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
Top Pill 3
Callout Card – Pillboxes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
Callout Card – Details and Subtext
Details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin ipsum sodales metus malesuada.
Subtext