Card

<pc-card>

0.1.0

experimental

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://placehold.co/300x200/?text=300×200&font=montserrat"
        alt="A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels"
    />

    <strong slot="header">Lorem ipsum</strong>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <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>

Code

Edit

Demos#

Basic card#

Basic cards aren’t very exciting, but they can display any content you want them to.

<pc-card class="card-basic">
    This is just a basic card. No image, no header and no footer. Just your content.
</pc-card>

<style>
    .card-basic {
        max-inline-size: 300px;
    }
</style>

Code

Edit

With header#

Headers can be used to display titles and more.

<pc-card class="card-header">
    <header slot="header">
        <strong>Header title</strong>
        <pc-button size="small" variant="plain">
            <pc-icon
                library="default"
                icon-style="solid"
                name="gear"
                label="Settings"
            ></pc-icon>
        </pc-button>
    </header>

    This card has a header. You can put all sorts of things in it!
</pc-card>

<style>
    .card-header {
        max-inline-size: 300px;
    }

    .card-header header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>

Code

Edit

Footers can be used to display actions, summaries or other relevant content.

<pc-card class="card-footer">
    This card has a footer. You can put all sorts of things in it!

    <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-footer {
        max-inline-size: 300px;
    }

    .card-footer footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--pc-spacing-s);
    }
</style>

Code

Edit

Media#

Cards accept a media slot. The media is displayed at the top of the card and stretches to fit.

<pc-card class="card-image">
    <img
        slot="media"
        src="https://placehold.co/300x200/?text=300×200&font=montserrat"
        alt="A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels"
    />

    This is a placeholder image with a grey background and dark grey text with a 300×200 intrinsic resolution.
</pc-card>

<style>
    .card-image {
        max-inline-size: 300px;
    }
</style>

Code

Edit

Variants#

Use the variant attribute to change the card’s variant.

<div class="pc-grid">
    <pc-card variant="accent">
        <img
            slot="media"
            src="https://placehold.co/300x200/?text=300×200&font=montserrat"
            alt="A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels"
        />

        Accent
    </pc-card>
    <pc-card variant="filled outlined">
        <img
            slot="media"
            src="https://placehold.co/300x200/?text=300×200&font=montserrat"
            alt="A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels"
        />

        Filled + Outlined
    </pc-card>
    <pc-card variant="filled">
        <img
            slot="media"
            src="https://placehold.co/300x200/?text=300×200&font=montserrat"
            alt="A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels"
        />

        Filled
    </pc-card>
    <pc-card variant="outlined">
        <img
            slot="media"
            src="https://placehold.co/300x200/?text=300×200&font=montserrat"
            alt="A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels"
        />

        Outlined
    </pc-card>
    <pc-card variant="plain">
        <img
            slot="media"
            src="https://placehold.co/300x200/?text=300×200&font=montserrat"
            alt="A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels"
        />

        Plain
    </pc-card>
</div>

Code

Edit

Eigenschaften#

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.

Slots#

Name	Beschreibung
(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.

Erfahre mehr über die Benutzung von Slots.

Benutzerdefinierte Eigenschaften#

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.

Parts#

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.

Importieren#

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.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <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, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/card/card.js"; 

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

import "placer-toolkit/dist/components/card/card.js";

Demos#

Basic card#

With header#

With footer#

Media#

Variants#

Eigenschaften#

Slots#

Benutzerdefinierte Eigenschaften#

Parts#

Importieren#