06. Components: cards.css

Cards and panels organize bounded content. Do not wrap every section in a card. Use headings, spacing, and dividers first.

Use cards for

  • .la-card for standalone bounded content.
  • .la-panel for app sections with a header and body.
  • .la-split-card when two related areas belong in one container.
  • .la-card-muted only for nested or supporting detail blocks.

Avoid cards for

  • Normal page sections that only need a heading and spacing.
  • Nested cards inside cards.
  • Decorative stat cards with no useful data.
  • Filling empty space.

Base cards

There are three base surfaces. .la-card for primary containers, .la-card-muted for nested detail blocks, .la-card-table for table wrappers with controlled overflow.

Standard card

Use for standalone content that needs separation from the page.

Muted detail block

Use inside a larger section for supporting detail, not as a main layout pattern.

.la-card-table

Use around a table only when the table needs padding and clipped overflow.

Border states

Use border state modifiers only when the card needs to show status. Most cards should not have a state border.

.la-card--active-border

Selected or currently active item.

.la-card--warning-border

Requires attention or has a warning condition.

.la-card--error-border

Has a validation error or critical issue.

Split card

Two columns inside one shared card. The card border and background wrap both sides together. Neither column has its own box. A divider line is added between them automatically. Use a named ratio modifier or set --la-split-cols inline for custom proportions.

.la-card .la-split-card : default (--la-split-cols: 2fr 1fr)

Implementation notes

Main content side. Holds explanations, lists, or instructions.

Reference

<div class="la-card la-split-card">
  <div>Main content</div>
  <div>Aside / reference</div>
</div>

Named ratio modifiers: left is main, right is aside

.la-split-card--1-1
1fr 1fr: equal columns
.la-split-card--2-1
2fr 1fr: default
.la-split-card--3-1
3fr 1fr: narrow aside
.la-split-card--3-2
3fr 2fr: slight lean main
.la-split-card--1-2
1fr 2fr: wide aside
.la-split-card--1-3
1fr 3fr: very wide aside

For a ratio not in the list: <div class="la-split-card" style="--la-split-cols: 5fr 2fr">

Split aside

Two independent columns with no shared box, border, or background. Each column provides its own surface. Place a card, form, or plain section inside. The aside clamps to a pixel range and the main column fills the rest.

.la-split-aside : default (aside: 300 to 420px)

Main content area

This column takes the remaining space after the aside is sized. Use it for primary content such as text, tables, or forms.

Aside column

Clamped to 300 to 420px via --la-split-aside-min and --la-split-aside-max. Use it for metadata, details, or code references.

<div class="la-split-aside">
  <div>Main content</div>
  <div>Aside</div>
</div>

Width modifiers

.la-split-aside : default
aside: 300 to 420px
.la-split-aside--narrow
aside: 240 to 340px: compact details
.la-split-aside--wide
aside: 360 to 520px: richer panels
.la-split-aside--balanced
1fr 1fr: equal columns, use for two-pane comparisons

Structural difference

Split card, one shared box

Main (2fr)
Aside (1fr)

One border wraps both columns

Split aside, two separate boxes

Main
Aside (px)

Each column has its own border

Panels

Panels are flatter and more structured than cards. Use them for app sections that need a title row and optional header actions.

Panel title

Use panels for structured content sections that need a title row and optional actions.

Quiet panel

Use .la-panel-quiet when the page already has enough visual containers.

Explanation cards

Use for short documented choices, onboarding notes, or public-facing explanation blocks. Use these sparingly. Most sections do not need numbered explanation cards.

01

Choose the existing pattern

Start with the documented component before creating a new local style.

02

Keep the boundary useful

A card should group content. It should not exist only as decoration.

03

Prefer fewer variants

Use the smallest set of choices that solves the layout problem clearly.

Linked cards

Use linked cards for navigation shortcuts. Use .la-card-grid for responsive auto-fill layout. .la-hero-card and .la-card-centered are max-width centering helpers for intro or hero sections.