ComparisonColumn

One self-contained option in a comparison, with independent emphasis and freely composed details.

ComparisonColumn

View source ยท API reference

A highlighted option

An icon and badge identify the option before its supporting details.

Recommended here

Component composition

Build a view from focused pieces.

  • Readable source
  • Shared theme tokens
Explore card composition 
<ComparisonColumn
  title="Component composition"
  summary="Build a view from focused pieces."
  badge="Recommended here"
  icon="lucide:check"
  tone="accent"
>
  <ul class="pl-0">
    <ComparisonFeature>Readable source</ComparisonFeature>
    <ComparisonFeature>Shared theme tokens</ComparisonFeature>
  </ul>
  <BtnLink href="/components/landing/feature-card/" variant="link">
    Explore card composition
  </BtnLink>
</ComparisonColumn>

A quiet alternative

Use outline or neutral treatments when both options should have equal emphasis.

Plain content

A good fit for a short explanation.

Choose the simplest structure that communicates the information.

<ComparisonColumn
  title="Plain content"
  summary="A good fit for a short explanation."
  variant="outline"
>
  <p class="mb-0">Choose the simplest structure that communicates the information.</p>
</ComparisonColumn>

Behavior and accessibility

Titles render as h3. A comparison column can contain links but is not itself clickable. Keep feature order consistent across sibling columns.

API reference

ComparisonColumn contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

summary

RefOrValue<string>
Default
not set

A concise explanation beneath the heading.

badge

RefOrValue<string>
Default
not set

Optional compact label rendered with Badge.

icon

RefOrValue<string>
Default
not set

Registered SVG icon name. In browser apps, include the icon in the resolver passed to defineIconComponents.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

Composition

Default slot: details, feature lists and actions. Register defineComparisonColumnComponent with Panel, Flex, Badge and Icon dependencies.