Menu Card

Design System - Menu Card component

The Menu Card component serves as a navigational tile, guiding users through various modules, processes, or tasks. Built with accessibility, responsiveness, and clarity in mind, this molecule uses strong visual hierarchy with clear icons, descriptions, and optional labels. It supports interaction cues such as hover states and is optimised for multiple device sizes.

// Sample code

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

// Sample code

MenuCard(
            heading: 'Heading',
            description: 'Lorem Ipsum',
            onTap: () {
              // Handle tap
            },
          ),

Anatomy

Variants

Menu 1

A basic card with an icon and a short descriptive text for task or module access.

Menu 2 Extends Menu 1 by including a Label next to the icon to add context or categorisation.

Properties

Icon - Menu 1 & 2 Clearly conveys the function or context of the menu item.

Description - Menu 1 & 2 A short line of text to inform the user about the menu’s purpose, to indicate that the button is not active.

Label - Menu 2 Appears above the description and helps name or categorise grouped items.

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

icon

text

menuName

text

description

yes/no

className

yes/no

styles

number

onClick

yes/no

Usage Guide

Maintain clarity

Use concise, descriptive labels and explanations for each card.  Overload the card with long sentences or technical jargon..

Change log

Date

Number

Notes

Design Checklist

PreviousMolecule NextFilter Card

Last updated 1 day ago

Was this helpful?