Info Card
An information card is a content element used to highlight important messages with distinct visual cues. It offers four customizable options: Info for general informational content, Caution to draw attention to potential issues or recommendations, Warning for critical alerts that require immediate attention and Success to celebrate positive outcomes or achievements. Each option is designed to display in a different style, making it easy for users to quickly identify the nature of the message.
When To Use This Component
Use the Info Card block to draw attention to important, contextual messages that support the main page content. This component is ideal for highlighting information that users should notice quickly without interrupting the overall flow of the page.
USE CASES OR SCENARIOS
- Providing helpful tips, reminders, or clarifications
- Calling out important deadlines, policies, or requirements
- Highlighting cautions or warnings related to processes or actions
- Communicating successful outcomes, confirmations, or next steps
The Info Card block should be used selectively to emphasize key messages, not as a replacement for standard body text.
Component Do’s & Don’ts
There might be a time when you don’t know whether to use an Info Card component or not. Here are some examples of how to effectively use a Info Card component component and when you shouldn’t use one:
DO
When using the Info Card component, select the appropriate card type (Info, Caution, Warning, or Success) based on the message’s intent and level of urgency. Keep the content concise and easy to scan so users can quickly understand the message, and place the card near related content to provide clear context. Use plain, straightforward language that is accessible to a broad audience, and ensure accessibility by communicating meaning through text rather than relying on color alone.
DON’T
Avoid overusing Info Cards, as too many can lessen their impact and make it harder for users to identify important messages. Do not use Warning or Caution styles for non-critical information, as this can confuse or unnecessarily alarm users. Keep content within each card focused and concise, avoiding lengthy or complex text, and do not use Info Cards purely as layout or decorative elements. Additionally, avoid duplicating the same message across multiple cards on a single page to maintain clarity and effectiveness.
Component Design Options
Below are the Info Card component design options, with explanations of each and guidance on proper usage.
Information
Can be used for general informational content.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel sequi, eius quasi ipsam quae eos tempora maiores excepturi, aspernatur ad facilis? Doloribus qui facilis voluptates quidem provident laboriosam quod.
Caution
Can be used to draw attention to potential issues or recommendations.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel sequi, eius quasi ipsam quae eos tempora maiores excepturi, aspernatur ad facilis? Doloribus qui facilis voluptates quidem provident laboriosam quod.
Warning
Can be used for critical alerts that require immediate attention or improper ways of execution.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel sequi, eius quasi ipsam quae eos tempora maiores excepturi, aspernatur ad facilis? Doloribus qui facilis voluptates quidem provident laboriosam quod.
Success
to celebrate positive outcomes, achievements or proper ways of execution.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt vel sequi, eius quasi ipsam quae eos tempora maiores excepturi, aspernatur ad facilis? Doloribus qui facilis voluptates quidem provident laboriosam quod.