Card
<pc-card> Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
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 | Beschreibung | Reflektiert | Standard |
|---|---|---|---|
variant | The card’s variant. Typ: "accent"
| "filled"
| "outlined"
| "plain" |
| "outlined" |
updateComplete | Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde. | ‐ |
Erfahre mehr über Attribute und Eigenschaften.
| Name | Beschreibung |
|---|---|
| (Standard) | 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. |
Erfahre mehr über die Benutzung von Slots.
| Name | Beschreibung | Standard |
|---|---|---|
--spacing | The amount of space around and between sections of the card. | var(--pc-spacing-l) |
Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.
| Name | Beschreibung |
|---|---|
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. |
Erfahre mehr über das Anpassen von CSS‐Parts.
Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.
Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/card/card.js"></script>Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/card/card.js";Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "placer-toolkit/dist/components/card/card.js";