Callout banners draw attention to actions that are not the primary purpose of a page as a way to direct people in the wrong place to the right place. These banners can be distracting and lead a user on a tangent that takes them away from the action you wanted them to perform. Use these when you think a user may be in the wrong place and you want to intentionally divert them.

Example: A user wants to file an accident claim and they went to the accident insurance informational page, the banner could offer a link to file a claim.

Callout banners draw attention to actions that are not the primary purpose of a page as a way to direct people in the wrong place to the right place, such as: 

• Logging In
• Links to forms
• Link to file a claim
• Providing contact information for support

These banners can be distracting and lead a user on a tangent that takes them away from the action you wanted them to perform. Use these when you think a user may be in the wrong place and you want to intentionally divert them.

Do not use to only convey information such as insurance fun facts. They should assist a user to take an action.

Character count: Limit to two or fewer lines at max width (approx. 230 characters)

There are no specific component properties at this time.

Description (Required)

• Rich text field (Limit to two or fewer lines at max width (approx. 230 characters))

Call to action (Optional)

• Used for secondary, non-priority actions on a page such as informing users they should “Log In” to accomplish a particular set of actions
• Styled as a ghost button
• Plain Text
• Limit button text to no more than a few words
• Side Note: “Log In” is always two words when used as a verb

No imagery is used on the callout banner component.

If the button is used on the callout banner, it is set to flex to the content description.