CardList Design System

All UI components, icons, and design tokens

Icons (54)

Brand

cardList

UI Icons

boxAlt
chartTrend
chevronUp
chevronDown
chevronLeft
chevronRight
home
users
orders
logout
plus
refresh
check
x
store
listUL
collection
search
user
settings
arrowRight
eye
menu
edit
trash
rarityCommon
rarityUncommon
rarityRare
alert
image
externalLink
filter
heart
clock
calendar
chart
link
truck
code
trendUp
trendDown
minus
globe
lock
envelope
pause
play
money
file
download
info
hash
discord
instagram

Button

Variants

Sizes

States

With Icons

All Variant + Size Combinations

Badge

Variants

DefaultSuccessWarningErrorInfoMuted

Sizes

SmallMedium

Pro Badge

PROPRO

Input

This is a hint message

This field is required

$
cards

TextArea

Keep it brief

Too short

Select

Pick your favorite

Selection required

Switch

Slider

ToggleGroup

Default Variant

Dark Variant

TabGroup

Without Counts

With Counts

Tooltip

Modal

Breadcrumb

StatCard

0
Total Cards
$0.00
Total Value
13%
0
Active Listings
3%
0
Issues

Loading State

Loading Card
Loading w/ Icon

With Total Value

0
Listed Cards142 total

DashboardCard

Basic Card

Simple dashboard card with a title.

With Action

View All

Dashboard card with an action link.

Loading Card

This card is loading.

Pro Feature

This content is locked behind Pro.

Pro Feature

Table

Default

Card Name Set Price Qty Status
Charizard VMAXDarkness Ablaze$124.992Listed
Pikachu VVivid Voltage$8.505Draft
Mewtwo GXShining Legends$45.001Listed
Black LotusAlpha$35,000.001Listed
Jace, the Mind SculptorWorldwake$89.993Draft

Loading

Card Name Set Price Qty Status

Empty

Card Name Set Price Qty Status
No data available

Pagination

Showing 1-10 of 142
...

Loader

Small
Medium
Large

LoadingBar

Indeterminate
25%
50%
75%
100%

Skeleton

Text
Circle
Rectangle
Card

EmptyState

No Cards Found

Add some cards to your inventory to get started.

No Results

Try adjusting your search or filter criteria.

TextHighlight

This text has a highlighted section inline with regular text.

PageHeader

Page Title

With Subtitle

This is a subtitle describing the page

With Actions

Page with action buttons

ScrollToTop

Scroll down the page to see the scroll-to-top button appear in the bottom right corner.

Design Tokens

Colors

--Color-Accent
--Color-BG
--Color-Text
--Color-White
Success
Warning
Error
Info

Shadows

--Shadow-Brutal-SM
--Shadow-Brutal-Base
--Shadow-Brutal-LG
--Shadow-Brutal-XL
--Shadow-Brutal-Inset

Font Sizes

--Font-Size-XS (0.75rem)
--Font-Size-SM (0.875rem)
--Font-Size-Base (1rem)
--Font-Size-LG (1.125rem)
--Font-Size-XL (1.25rem)
--Font-Size-2XL (1.5rem)
--Font-Size-3XL (1.875rem)
--Font-Size-4XL (2.25rem)
--Font-Size-5XL (3rem)

Font Weights

Normal (400) - The quick brown fox
Medium (500) - The quick brown fox
Semibold (600) - The quick brown fox
Bold (700) - The quick brown fox
Extrabold (800) - The quick brown fox

Spacing Scale

--Spacing-0 (0)
--Spacing-1 (0.25rem)
--Spacing-2 (0.5rem)
--Spacing-3 (0.75rem)
--Spacing-4 (1rem)
--Spacing-5 (1.25rem)
--Spacing-6 (1.5rem)
--Spacing-8 (2rem)
--Spacing-10 (2.5rem)
--Spacing-12 (3rem)
--Spacing-16 (4rem)
--Spacing-20 (5rem)
--Spacing-24 (6rem)