## Usage
Card is a layout component used for grouping interactive content areas on a page.
Use `w-card` for listings, summaries, recommendations, or selectable choices where the grouped content should feel like a single object.
The component does not add padding, headings, spacing between children, or semantic structure. Those must be provided by the content inside the card.
### Basic Card
```html
Apartment in Oslo
Bright 3-room apartment with balcony.
```
### Visual Treatments
The default card uses an elevated surface. Use `flat` when the card should sit more quietly in the layout.
```html
Elevated card
Use this for cards that need more visual separation.
Flat card
Use this for dense layouts or cards inside another surface.
```
### Selected Cards
Use `selected` when a card represents a selected item or choice.
```html
Standard delivery
Delivered in 2-4 business days.
```
The `selected` property only controls the card's visual state. Update it from your application state when the selection changes.
### Cards as Links
For navigation, use a native link inside the card and add `data-card-action` to expand its click area to the whole card.
```html
```
When the card has a second independent navigation target, add `data-card-secondary-action` to that link. The secondary action remains independently clickable and should be layered above the primary card action.
```html
```
Do not use a card action when the card contains buttons, form controls, or other interactive elements that should be part of the same content area. Use the specific control directly instead.