Panel Card

Design System - Panel Card component

The Panel Card component is a composite component designed to communicate clear, high-visibility feedback messages, typically success or error outcomes. It brings together an icon, message, optional description, interactive actions, and optional widgets into one cohesive layout.

// Sample code

  <CheckBox
    label="Label"
    onChange={(e)=>{console.log(e.target.checked}}
  />

// Sample code

DigitAccordion(
              header: Text('Accordion'),
              content: Text('This is the content of Accordion'),
              initiallyExpanded: false,
              divider: true,
              showBorder: true,
            ),

Anatomy

Variants

Success Panel

Displays a confirmation message indicating successful operations and uses a green colour scheme with success iconography and optional ID or confirmation number.

Error Panel Indicates failure or issues in the process, and this feature has a red colour scheme with an error icon, and optionally includes details on what failed and how to resolve it.

Properties

Description

Toggle the presence of additional descriptive text below the main message.

Edit Description Enables inline editing of the description field when required, allowing admins or users to update metadata or identifiers dynamically..

Actions Supports one or more action buttons such as “Go Back,” “Continue,” “Retry,” or custom CTAs.

Additional Widgets Includes optional elements like info cards, links, or nested content to provide supplementary guidance or system feedback.

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.

Property

Value

Default

className

text

style

text

children

yes/no

footerChildren

yes/no

message

number

type

yes/no

false

info

yes/no

response

yes/no

customIcon

yes/no

iconFill

number

false

multipleResponses

yes/no

footerclassName

yes/no

false

footerStyles

yes/no

cardClassName

yes/no

cardStyles

yes/no

maxFooterButtonsAllowed

yes/no

sortFooterButtons

yes/no

showChildrenInline

yes/no

description

yes/no

Usage Guide

Provide specific feedback

Display a unique reference ID, transaction number, or message that helps users verify or follow up.  Leave users guessing with vague messages like “Request submitted” without additional traceable context.

Change log

Date

Number

Notes

Design Checklist

PreviousLanding Page Card NextPop Ups

Last updated 1 day ago

Was this helpful?