Alert Card

Design System - Alert Card Component

The Accordion organises content into expandable and collapsible sections, making it ideal for dense information like FAQs or instructions. They are suitable for organising step-by-step instructions or processes.

Component React

// Sample code

<AlertCard
  additionalElements={[
    <p key="1">Additional Element 1</p>,
    <img key="2" alt="Additional Element 2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"/>,
    <img key="3" alt="Additional Element 3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"/>,
    <img key="4" alt="Additional Element 4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"/>,
    <img key="5" alt="Additional Element 5" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"/>,
    <img key="6" alt="Additional Element 6" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"/>,
    <img key="7" alt="Additional Element 7" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"/>,
    <img key="8" alt="Additional Element 8" src="https://digit.org/wp-content/uploads/2023/06/Digit-Logo-1.png"/>,
    <TextArea populators={{resizeSmart: true}} type="textarea"/>,
    <InfoButton label="Button" size="large"/>
  ]}
  label="Info"
  text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
  variant="default"
/>

Component Flutter

// Sample code

InfoCard(
            title: 'Info Card',
            type: InfoType.info,
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Morbi cursus eget ex in congue. Nullam finibus at urna et posuere.'
          ),

Component Design

Anatomy

---

Variants

---

	Basic Accordion The Input field enables users to interact with the application through content input and data. The component allows users to input responses or data based on specific requirements.
	Nested Accordion The Input field enables users to interact with the application through content input and data. The component allows users to input responses or data based on specific requirements.

Key Properties

Title The text displayed at the top of the accordion section, representing the title of the content. This is a required property and is typically used to describe the section's content or topic.
Children The content that will be displayed inside the accordion when it is expanded. This can include text, images, or other components. This is a required property and holds the main body of the accordion's collapsible section.
Icon An optional icon displayed beside the title. Icons are used to enhance the visual appeal or convey meaning alongside the title text, such as indicating expand/collapse actions or providing context to the content. The width / height of the icon can be controlled through the Icon Width property to ensure it fits well with the title or the overall design of the accordion.
Initially Open Determines whether the accordion section is open by default when the component is first rendered. Setting this to true will make the accordion section expanded by default, while the default value false keeps it collapsed initially.
Hide Card Border Controls whether the border around the accordion section is visible. Defaults to false, showing the border.
Hide Divider Specifies whether the divider line between the title and content is visible. Defaults to false, meaning the divider is shown.
Serial Number An optional number to display before the title. This can be used for ordered sections or lists within the accordion.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

React

Property	Value	Default
label	string	-
text	string	-
variant	string	-
style	object	{}
textStyle	object	{}
additionalElements	array	[]
inline	boolean	false
className	string	-
headerWrapperClassName	string	-
headerClassName	string	-

Flutter

Property	Value	Default
Title	String	-
type	InfoType	info
description	String	-
additionalWidget	List<Widget>	-
inline	bool	false

Behaviours

---

	Flexible Width The width of the container defines the width of the accordion.
	Text Overflow The text will overflow / wrap to the next line based on the width of the accordion. The limit to the volume of text is not defined.
	Animation The opening and closing movements of an accordion has an “Ease in” animation. The arrow which face sideways in the closed state rotate to facing downwards in the open state.

Usage Guide

---

	Use for compact information display Organise dense or hierarchical content like FAQs, step-by-step instructions, or grouped data to avoid overwhelming users with too much visible information. Avoid placing simple messages inside Accordions. Since the content is brief and doesn't require hiding, displaying it openly ensures that users see it immediately without extra steps.

Change log

---

Date	Number	Notes

Design Checklist

---

	All interactive states Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible use of colours Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible contrast for text Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible contrast for UI components Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Keyboard interactions Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Screen reader accessible All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
	Responsive for all breakpoints Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
	Usage guidelines Includes a list of dos and don'ts that highlight best practices and common mistakes.
	Content guidelines Content standards and usage guidelines for writing and formatting in-product content for the component.
	Defined variants and properties Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states...etc)
	Defined behaviors Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
	Design Kit Access to the design file for the component in Figma multiple options, states, color themes, and platform scales.