Card

A flexible container component.

Purpose

A card is a flexible container that displays summarized information, actions, and/or elements related to a single topic.

Different combinations of elements can be used within cards to display information:

Header (Image (image can run to the edge or be placed within 16px padding, see sizing below))
Title
Subheader
Content
Footer

Cards can contain additional components such as buttons, charts, graphs, dividers, input fields, chips, tables, etc. Ensure hierarchy is established to enable a user to quickly scan and understand content.

View on PrimeNG

Get the Figma Asset

Get Documentation

Usage

When to use

Information, action, or element are related to the same topic
Create visual separation/hierarchy amongst large amounts of information
Contain elements such as a an image, table , chart, or graph

When not to use

Information, action, or element is not related
More detail is required than a high-level summarization

Video Recap

Best Practice

Example One

If displaying multiple cards in the same area, place and size them to be in a grid format.

Example Two

Use cardShadow as a drop shadow effect to differentiate a card from other elements.

Example Three

Example Four

Winsupply Standards

Testing Demo

Test

testing content here testing content here

Right Aligned Numbers

$21,344.00 |

Numbers in a table like cost, quantity and price are right aligned inside of a table.

Date Format

00/00/2024

Across all domains, the date format should be listed in this way to ensure consistency.