# option-card — Examples

## Default

```html
<col-ui gap="2" role="radiogroup" aria-label="Demo">
  <option-card-ui name="demo-1" value="build" checked heading="I'm building a product" description="Spinning up a new project — design, ship, iterate."></option-card-ui>
  <option-card-ui name="demo-1" value="explore" heading="I'm exploring the product" description="Kicking the tires before bringing a team along."></option-card-ui>
  <option-card-ui name="demo-1" value="migrate" heading="I'm migrating from another tool" description="Moving an existing workspace and want a smooth port."></option-card-ui>
</col-ui>
```

## Rich heading slot

```html
<col-ui gap="2" role="radiogroup" aria-label="Plan">
  <option-card-ui name="demo-plan" value="free" description="Up to 5 members · 10 projects · community support">
    <span slot="heading">
      Free
      <text-ui color="subtle" size="sm">· $0/mo</text-ui>
    </span>
  </option-card-ui>
  <option-card-ui name="demo-plan" value="pro" checked description="Unlimited members · advanced charts · 100 GB storage">
    <span slot="heading">
      Pro
      <text-ui color="subtle" size="sm">· $49/mo</text-ui>
      <badge-ui text="14-day trial" variant="accent"></badge-ui>
    </span>
  </option-card-ui>
  <option-card-ui name="demo-plan" value="team" description="Everything in Pro · SSO · audit log · 1 TB storage">
    <span slot="heading">
      Team
      <text-ui color="subtle" size="sm">· $129/mo</text-ui>
    </span>
  </option-card-ui>
</col-ui>
```

## With leading icon

```html
<col-ui gap="2" role="radiogroup" aria-label="Storage">
  <option-card-ui name="demo-icon" value="local" icon="hard-drive" checked heading="Local storage" description="Files stay on this device. No sync, no upload."></option-card-ui>
  <option-card-ui name="demo-icon" value="cloud" icon="cloud-arrow-up" heading="Cloud storage" description="Files sync across devices and backup automatically."></option-card-ui>
  <option-card-ui name="demo-icon" value="hybrid" icon="arrows-clockwise" heading="Hybrid" description="Cache locally, sync changes to the cloud in the background."></option-card-ui>
</col-ui>
```
