Card

Content-layer surface for grouped content. Fill, rim and shadow come from the material — never add a border, a bg-canvas-* fill, or a shadow-* utility, which replaces the whole shadow chain and strips the rim.

Basic

AdventurePass

Annual outdoor recreation pass

Access to 150+ campgrounds and resort facilities across the TRA network.

Accent variants

Tone is mixed into the material — an evenly tinted pane of glass, edge to edge. Not a left border, and the rim stays neutral, so every panel on the scene reads as the same material. A dot in the top-right corner states the tone at full strength, since the tint stays deliberately faint.

Ember accent

Primary / action context

Canopy accent

Success / nature context

Creek accent

Info / secondary context

<Card accent="ember">...</Card>
<Card accent="canopy">...</Card>
<Card accent="creek">...</Card>

Interactive

Interactive card

Lifts toward the viewer on hover — a slight scale with a shadow that spreads and softens. Depth, not movement up the page.

<Card interactive>...</Card>

Material

Content (default)

A work surface. Almost everything is this.

Chrome frosts whatever is behind it, so it has to sit on the scene. Nesting one inside another panel stacks glass on glass. It is a prop rather than a class you pass in: .summit-content is defined after .summit-chrome-sidebar, so a chrome class on className would lose the cascade and do nothing.

<Card material="chrome">...</Card>