Info Card


This widget is a versatile and customizable information card designed inside a digit ui widget. It provides a visually appealing way to display information, with options for different types of information.

The Info Card supports different types of information, each with its distinct visual style:

  • Info: Default information card with a blue background and an information icon.

  • Success: This represents a successful operation, featuring a green background and a check-circle icon.

  • Error: Indicates an error or unsuccessful operation with a red background and an error icon.

  • Warning: Represents a warning or caution, featuring a yellow background and a warning icon.

Developers can include additional widgets beneath the description for extra information or interactive elements. The inline property controls whether these widgets are displayed horizontally or vertically.


Info cards contain the following required parameters:

Name                             Description
title                           title displayed on the top of the card
description                     detailed content associated with the card
type                             specify the type of information

There are some additional customisation parameters:

icon                             optional icon to display on card
additionalWidgets               a list of widget to display below description
inline                          determine whether additional widgets displayed inline



Info Card

  title: 'Info',
  Description: 'description'

Success Card

  title: 'Success',
  type: InfoType.success,
  Description: 'description'

Error Card

  title: 'Error',
  type: InfoType.error,
  Description: 'description'

Warning Card

  title: 'Warning',
  type: InfoType.warning,
  Description: 'description'

Last updated

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.