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

Properties#

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 attributes and properties.

Slots#

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.

Custom properties#

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.

Parts#

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.

Importing#

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.

CDN (script tag)

CDN (import)

npm (import)

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

Demos#

Basic card#

With header#

With footer#

Media#

Variants#

Properties#

Slots#

Custom properties#

Parts#

Importing#