Use a callout row when

• Several items have similar importance.
• Each item contains a comparable amount and type of information.
• Users benefit from seeing the items as a related group.
• Information deserves more attention than ordinary body content.
• Users need to notice an instruction, deadline, clarification or other important supporting information.
• A small group of related information benefits from being visually contained.

Avoid

• Putting most of a page inside callouts.
• Using callouts only to make a page look more visually interesting.
• Placing unrelated information in the same callout.
• Using several emphasized callouts at the same level, which can make it unclear what is actually important.
• Avoid forcing content into matching columns when the items differ significantly in complexity or length.

Available configurations and colorways

How to build callouts

• Select the configuration and colorway that you wish to use.
• Like normal flex row configurations, you will need one general component for each column in your configuration. The only difference is, in callouts, the columns are styled differently into "cards."
• For example: if you select this configuration: [--][-] Two columns - wide left, you need to follow the flex row configuration component with two general components as in the screenshot to the right.