Card - Elements ​
Card is an interactive layout component to display information.
Accessibility ​
Card is a visual container. It does not create a heading, landmark, list item, link, button, or other semantic structure for the slotted content.
Provide Semantic Content ​
Use semantic HTML inside the card so assistive technologies can understand the content.
<w-card>
<article style="padding: 16px;" aria-labelledby="listing-heading">
<h3 id="listing-heading">Apartment in Oslo</h3>
<p>Bright 3-room apartment with balcony.</p>
</article>
</w-card>Do not rely on the card surface, border, or selected styling to communicate meaning.
Selected State ​
Use selected only when the card represents a selected item or choice.
<w-card selected>
<div style="padding: 16px;">
<h3>Standard delivery</h3>
<p>Delivered in 2-4 business days.</p>
</div>
</w-card>The selected state should also be clear from the surrounding context, such as a group label, heading, or visible text.
Clickable Cards ​
Use clickable only when the whole card has one action or represents one selectable choice.
<w-card clickable>
<div style="padding: 16px;">
<h3>Home delivery</h3>
<p>Delivered to your door.</p>
</div>
</w-card>The visible card content should describe what will be selected or activated. Do not put separate links, buttons, form controls, or other interactive elements inside a clickable card.
Prefer Specific Interactive Elements ​
If only part of the card is interactive, use the appropriate element for that action.
Use a link for navigation:
<w-card>
<div style="padding: 16px;">
<h3><a href="/listings/123">Apartment in Oslo</a></h3>
<p>Bright 3-room apartment with balcony.</p>
</div>
</w-card>Use a button for an action on the current page:
<w-card>
<div style="padding: 16px;">
<h3>Apartment in Oslo</h3>
<p>Bright 3-room apartment with balcony.</p>
<w-button variant="primary">Contact seller</w-button>
</div>
</w-card>Usage ​
Card is a layout component for visually grouping related content as one item.
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 ​
<w-card>
<div style="padding: 16px;">
<h3>Apartment in Oslo</h3>
<p>Bright 3-room apartment with balcony.</p>
</div>
</w-card>Visual Treatments ​
The default card uses an elevated surface. Use flat when the card should sit more quietly in the layout.
<w-card>
<div style="padding: 16px;">
<h3>Elevated card</h3>
<p>Use this for cards that need more visual separation.</p>
</div>
</w-card>
<w-card flat>
<div style="padding: 16px;">
<h3>Flat card</h3>
<p>Use this for dense layouts or cards inside another surface.</p>
</div>
</w-card>Selected Cards ​
Use selected when a card represents a selected item or choice.
<w-card selected>
<div style="padding: 16px;">
<h3>Standard delivery</h3>
<p>Delivered in 2-4 business days.</p>
</div>
</w-card>The selected property only controls the card's visual state. Update it from your application state when the selection changes.
Clickable Cards ​
Use clickable when the whole card should behave as one interactive choice. The card becomes keyboard focusable, and Enter or Space triggers a click on the card.
<w-card clickable>
<div style="padding: 16px;">
<h3>Pick up nearby</h3>
<p>Collect the item from a pickup point.</p>
</div>
</w-card>Listen for the card's click event and update selected yourself.
<w-card clickable selected>
<div style="padding: 16px;">
<h3>Home delivery</h3>
<p>Delivered to your door.</p>
</div>
</w-card>Do not use clickable when the card contains separate links, buttons, form controls, or other interactive elements. In those cases, keep the card non-clickable and make the specific control interactive instead.
Examples ​
Basic ​
<w-card>
<div style="padding: 16px;">
<h3>Apartment in Oslo</h3>
<p>Bright 3-room apartment with balcony.</p>
</div>
</w-card>Flat ​
<w-card flat>
<div style="padding: 16px;">
<h3>Order summary</h3>
<p>Review the item price, delivery, and total before continuing.</p>
</div>
</w-card>Selected ​
<w-card selected>
<div style="padding: 16px;">
<h3>Standard delivery</h3>
<p>Delivered in 2-4 business days.</p>
</div>
</w-card>Flat Selected ​
<w-card flat selected>
<div style="padding: 16px;">
<h3>Pickup point</h3>
<p>Collect the item from a nearby pickup point.</p>
</div>
</w-card>Clickable ​
<w-card clickable>
<div style="padding: 16px;">
<h3>Home delivery</h3>
<p>Delivered to your door.</p>
</div>
</w-card>Styling API ​
<w-card> API ​
Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
Properties ​
| Name | Type | Default | Summary |
|---|---|---|---|
| buttonText (JS only) | unknown | - | - |
| clickable | boolean | false | Whether the whole card is interactive. |
| flat | boolean | false | Whether the card uses the flat visual treatment. |
| selected | boolean | false | Whether the card is visually selected. |
Property Details ​
buttonText (JS only) ​
- Type:
unknown - Default:
-
clickable ​
Whether the whole card is interactive.
When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
- Type:
boolean - Default:
false
flat ​
Whether the card uses the flat visual treatment.
Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.
- Type:
boolean - Default:
false
selected ​
Whether the card is visually selected.
Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.
- Type:
boolean - Default:
false
Questions? ​
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system