Card

Cards can be used to group related subjects in a container.

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

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

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

  <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-button appearance="text" pill>
          More info
          <span class="pc-visually-hidden">about this card</span>
      </pc-button>
  </footer>
</pc-card>

<style>
  .card-overview {
      max-width: 300px;
  }

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

Code

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-width: 300px;
  }
</style>

Code

With header

Headers can be used to display titles and more.

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

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

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

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

Code

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-button appearance="text" pill>
          More info
          <span class="pc-visually-hidden">about this card</span>
      </pc-button>
  </footer>
</pc-card>

<style>
  .card-footer {
      max-width: 300px;
  }

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

Code

Images

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

<pc-card class="card-image">
  <img
      slot="image"
      src="https://placehold.co/300x200"
      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-width: 300px;
  }
</style>

Code

Slots

Name	Description
(default)	The card’s main content.
`image`	An optional image to render at the start of the card.
`header`	An optional header for the card.
`footer`	An optional footer for the card.
`image`	An optional image to render at the start of the card.

Learn more about using slots.

Custom properties

Name	Description	Default
`--border-color`	The card’s border colour, including borders inside the card.	-
`--border-radius`	The border radius of the card.	-
`--border-width`	The stroke width of the card’s borders.	-
`--padding`	The padding surrounding the card’s content.	-

Learn more about customising custom properties.

Parts

Name	Description
`base`	The component’s base wrapper.
`image`	The container that wraps the card’s image.
`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 ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.

Script

Import

Bundler

To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/card/card.js"></script>

To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:

import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/card/card.js";

To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:

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

Demos

Basic card

With header

With footer

Images

Slots

Custom properties

Parts

Importing