Card
Container for a related group of content with header, content slot and footer actions.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Team members
Manage your team and their account permissions.
- OROlivia Rhyeolivia@pixels.ioAdmin
- PBPhoenix Bakerphoenix@pixels.ioEditor
<article class="px-card" style="max-width:420px;width:100%">
<header class="px-card__head"><h3 class="px-card__title">Team members</h3><p class="px-card__desc">Manage your team and their account permissions.</p></header>
<div class="px-card__body">
<ul class="px-list">
<li><span class="px-list-item" style="cursor:default"><span class="px-avatar px-avatar--sm">OR</span><span class="px-list-item__text"><span class="px-list-item__title">Olivia Rhye</span><span class="px-list-item__sub">olivia@pixels.io</span></span><span class="px-badge px-badge--brand">Admin</span></span></li>
<li><span class="px-list-item" style="cursor:default"><span class="px-avatar px-avatar--sm px-avatar--accent">PB</span><span class="px-list-item__text"><span class="px-list-item__title">Phoenix Baker</span><span class="px-list-item__sub">phoenix@pixels.io</span></span><span class="px-badge">Editor</span></span></li>
</ul>
</div>
<footer class="px-card__foot"><button type="button" class="px-btn px-btn--secondary-gray">Cancel</button><button type="button" class="px-btn">Invite</button></footer>
</article>Usage
- Outlined for dense layouts, Raised to lift interactive cards.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Raised
px-card--raised.
Upgrade to Pro
Unlimited projects, brand kits and priority support.
<article class="px-card px-card--raised" style="max-width:360px"><div class="px-card__body"><h3 class="px-card__title">Upgrade to Pro</h3><p class="px-card__desc">Unlimited projects, brand kits and priority support.</p><div style="margin-top:16px"><button type="button" class="px-btn px-btn--block">Upgrade</button></div></div></article>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-card · px-card--raised | class | Outlined / Raised (Figma Elevation). |
px-card__head · __title · __desc · __body · __foot | class | Slots. |
Figma properties
Card4 variants · page “Data display”Open
Container for a related group of content with header, content slot and footer actions. Outlined for dense layouts, Raised to lift interactive cards. Swap the Content slot with your own component.
| Property | Type | Values |
|---|---|---|
| Title | Text | “Team members” |
| Description | Text | “Manage your team and their account permissions.” |
| Content swap | Instance swap | — |
| Footer | Boolean | — |
| Elevation | Variant | Outlined Raised |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-card-border | color-border-neutral-subtle | #f2f4f7 |
--px-card-radius | radius-20 | 20px |
--px-card-padding | spacing-20 | 20px |
--px-card-gap | spacing-16 | 16px |
Accessibility
- Use <article> or <section> with a heading.