Option card

Pick a plan

<div class="dsgn-option-cards" role="radiogroup" aria-label="Plan">
  <label class="dsgn-option-card"><input type="radio" class="dsgn-radio" name="dx-plan2" checked>
    <span class="dsgn-option-card-body"><span class="dsgn-option-card-title">Monthly</span><span class="dsgn-option-card-text">Cancel any time.</span></span>
    <span class="dsgn-option-card-meta">CZK 290</span></label>
  <label class="dsgn-option-card"><input type="radio" class="dsgn-radio" name="dx-plan2">
    <span class="dsgn-option-card-body"><span class="dsgn-option-card-title">Yearly</span><span class="dsgn-option-card-text">Two months free.</span></span>
    <span class="dsgn-option-card-meta">CZK 2 900</span></label>
</div>

Usage

The whole card is the label, so every pixel selects. Radio/checkbox sits on the first line. Selected = accent tint + 2 px accent ring (3:1) + the checked control itself. Focus ring goes around the card. Checkboxes work the same for multi-select.

Details

Classes

.dsgn-option-cards .dsgn-option-card .dsgn-radio .dsgn-checkbox .dsgn-option-card-body .dsgn-option-card-title .dsgn-option-card-text .dsgn-option-card-meta

Tokens used

--dsgn-border --dsgn-border-control --dsgn-border-width --dsgn-control-gap --dsgn-control-solid --dsgn-control-subtle --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-weight-medium --dsgn-font-weight-semibold --dsgn-inset --dsgn-line-height-body-s --dsgn-neutral-subtle --dsgn-radius-l --dsgn-shadow-raised --dsgn-space-2 --dsgn-space-64 --dsgn-stack --dsgn-surface-raised --dsgn-text --dsgn-text-disabled --dsgn-text-muted

In Figma

Option card

Import alone

dsgn.systems/components/option-card.css