Cards

Mode

Skin

Theme

Overview & Philosophy

Cards provide flexible, surface-level content containers featuring colored accents, tinted backgrounds, stat layouts, interactive states, and elevation stacking effects via Ashlar design tokens.

Basic Card

Card Title

Default card with hover shadow effect.

Another Card

Uses @include card mixin.

Accent Top — card-accent-top

Primary

Default primary color

Success

--color-primary: success

Error

--color-primary: error

Warning

--color-primary: warning

Accent Left — card-accent-left

Primary

Side status indicator

Active

User is online

Critical

3 errors found

Info

New update available

Accent Bottom — card-accent-bottom

Primary

Bottom accent line

Success

Completed task

Warning

Pending review

Error

Action required

Tinted Background — card-bg

Primary

Soft primary tint

Success

All systems operational

Error

Service disruption

Warning

High memory usage

Stat Cards

1,234 Total Users +12%
892 Active +5%
48 Pending +2
3 Errors -1

Stacked Card — card-stacked

Stacked Card

Visual depth illusion with pseudo-element behind the card.

Another Stack

Great for "group of items" indication.

Full Card — Header + Body + Footer

User Profile

Card with header, body content, and action footer.

Settings

Panel-header style with border-bottom, white background.

Card with Fields

User

NameMarko
Emailmarko@example.com
StatusActive

Statistics

Total1,234
Active892
Errors12

Card as Link

TypeLink
Click→

Secondary Brand Accent — --color-secondary

The secondary color family provides a brand accent (teal) distinct from primary (blue). Apply via .secondary utility or --color-primary: var(--color-secondary) override.

Accent Top

Card with secondary accent-top

Tinted Background

Card with secondary tinted bg

Light Background

Uses --color-secondary-light

Lighter Background

Uses --color-secondary-lighter

Flat Stack — flat-stack

Cards sit flush with a single shared rule between them. Applies @include flat-stack on the parent. Self-contained: forces --radius: 0 and --shadow-resting: none on children regardless of theme.

  • Panel one

    Top child — keeps its own top border.

  • Panel two

    Top border suppressed via --border-block-start: none.

  • Panel three

    Same joined rule continues down the stack.