Card

Defines .card — the primary container for grouped content — and .compareCard for side-by-side comparisons. All cards are built on var(--card-bg) + var(--card-border), with an optical bottom-padding correction applied to rounded boxes.

Default

.card — 16px radius, padding 28 24 32 (bottom +4 optical correction), hover: border-color: var(--c-sky) +--sh-soft. Heading 21px/800/ink-deep, body text 16px.

Training Program

BSS foundational capacity-building course. Applications open the first week of each month.

Compare Card

.compareCard — applies a primary 14% tint to the header area and uses .compareCardRow to list dt (15px/700) + dd pairs. The last row receives a +4px optical bottom-padding correction.

Basic Member

Monthly fee
Free
Sessions
2 / month
Downloads
PDF only

Full Member

Monthly fee
₩9,900 / month
Sessions
Unlimited
Downloads
All formats

Variants

Variants share the same card base — only the fill and content change. The soft variant (light-grey fill) omits the border and groups content subtly within a section. For real-world compositions — stats, testimonials, features, steps, checklists — see /design/patterns Patterns in Practice.

Soft card

Groups content one level without a border, using a light-grey fill.

Rules

Specs and correction principles that must be followed when implementing cards.

Base spec

  • Background: var(--card-bg)
  • Border: 1px solid var(--card-border)
  • Radius: border-radius: 16px
  • Padding: 28px 24px 32px — bottom +4 optical correction
  • Heading: 21px / 800 / var(--c-ink-deep)
  • Hover: border-color: var(--c-sky) + box-shadow: var(--sh-soft)

Optical bottom-padding correction — +4–6px

Korean text has no descenders, so text blocks appear to sit high inside their line-box. With symmetric padding this makes the top feel wider and the bottom cramped. Rounded cards and boxes therefore add 4–6px extra bottom padding. Guidelines: standard card 28 24 32 (+4), tall card 32 32 38 (+6), last row of a table or list flush against the card bottom padding-bottom +4. Horizontal padding is always symmetric.

Dark mode

--card-bg and --card-border are overridden automatically by dark tokens. The primary tint in the compare card header switches to var(--c-sky) 14% in dark mode. No separate fill is needed — tokens handle it entirely.