Card
<pc-card> Cards can be used to group related subjects in a container.
<pc-card class="card-overview">
<img
slot="media"
src="https://placer-toolkit.vercel.app/placeholder/300x200.svg"
alt=""
/>
<strong slot="header">Header title</strong>
This is a card with an image, a header and some footer buttons.
<footer slot="footer">
<pc-button appearance="primary" pill>
<pc-icon
library="default"
icon-style="solid"
name="cart-shopping"
slot="prefix"
></pc-icon>
Buy
</pc-button>
<pc-dropdown placement="bottom-end">
<pc-button appearance="neutral" variant="plain" slot="trigger" pill>
<pc-icon
library="default"
icon-style="solid"
name="ellipsis"
label="More information"
></pc-icon>
</pc-button>
<pc-dropdown-item value="view-details">
<pc-icon
library="default"
icon-style="solid"
name="circle-info"
slot="icon"
></pc-icon>
View details
</pc-dropdown-item>
<pc-dropdown-item value="favourite">
<pc-icon
library="default"
icon-style="solid"
name="heart"
slot="icon"
></pc-icon>
Favourite
</pc-dropdown-item>
<pc-dropdown-item value="share">
<pc-icon
library="default"
icon-style="solid"
name="share-nodes"
slot="icon"
></pc-icon>
Share
</pc-dropdown-item>
<pc-dropdown-item value="compare">
<pc-icon
library="default"
icon-style="solid"
name="scale-balanced"
slot="icon"
></pc-icon>
Compare
</pc-dropdown-item>
</pc-dropdown>
</footer>
</pc-card>
<style>
.card-overview {
max-inline-size: 300px;
}
.card-overview footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--pc-spacing-s);
}
</style>Basic cards aren’t very exciting, but they can display any content you want them to.
Headers can be used to display titles and more.
Footers can be used to display actions, summaries or other relevant content.
Cards accept a media slot. The media is displayed at the top of the card and stretches to fit.
Use the variant attribute to change the card’s variant.
| Name | Description | Reflects | Default |
|---|---|---|---|
variant | The card’s variant. Type: "accent"
| "filled"
| "outlined"
| "plain" |
| "outlined" |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about customising animations.
| Name | Description |
|---|---|
| (default) | The card’s main content. |
media | An optional media section to render at the start of the card. |
header | An optional header for the card. |
footer | An optional footer for the card. |
Learn more about using slots.
| Name | Description | Default |
|---|---|---|
--spacing | The amount of space around and between sections of the card. | var(--pc-spacing-l) |
Learn more about customising custom properties.
| Name | Description |
|---|---|
base | The component’s base wrapper. |
media | The container that wraps the card’s media. |
header | The container that wraps the card’s header. |
body | The container that wraps the card’s main content. |
footer | The container that wraps the card’s footer. |
Learn more about customising CSS parts.
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/card/card.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/card/card.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/card/card.js";