Atlas is a work in progress.

Components

Card

Flexible container for grouping related content and actions into a visually distinct, bounded surface.

Figma Storybook Mantine Source

Import

import { Card } from '@pros/atlas';

Usage

View in Storybook

When To Use

Lorem ipsum: Dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod: Tempor incididunt ut labore et dolore magna aliqua.

Anatomy

Label: Lorem ipsum dolor sit amet.
Icon (Optional): Consectetur adipiscing elit.

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Guidelines

Do's

Lorem ipsum: Dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod: Tempor incididunt ut labore et dolore magna aliqua.

Don'ts

Lorem ipsum: Dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod: Tempor incididunt ut labore et dolore magna aliqua.

Accessibility

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

API Reference

The Card component accepts the following props.

Prop

Type

Accordion

Vertically stacked set of collapsible sections that allow users to toggle the visibility of content panels.

Datagrid

Rich data table with sorting, filtering, row selection, pagination, and column customization.

On this page

Import Usage When To Use Anatomy Examples Guidelines Do's Don'ts Accessibility API Reference