Card

A Material 3 inspired card surface for grouping related content.
Overview API

Usage

Order Summary

3 items in your cart

Checkout

Order Summary

3 items in your cart


  <wc-card style="min-width: 18rem;">
   <wc-card-content>
      <h3 class="text-title">Order Summary</h3>
      <p class="text-body">3 items in your cart</p>
      <wc-button size="sm">Checkout</wc-button>
    </wc-card-content>
  </wc-card>

  <wc-card style="min-width: 18rem;" actionable="true">
    <h3 class="text-title">Order Summary</h3>
    <p class="text-body">3 items in your cart</p>
  </wc-card>

Variants

Elevated

Default surface with elevation.

Filled

Container-emphasis card style.

Outlined

Border-emphasis card style.


  <wc-card variant="elevated" style="width: 100%;">
    <h3>Elevated</h3>
    <p>Default surface with elevation.</p>
  </wc-card>

  <wc-card variant="filled" style="width: 100%;">
    <h3>Filled</h3>
    <p>Container-emphasis card style.</p>
  </wc-card>

  <wc-card variant="outlined" style="width: 100%;">
    <h3>Outlined</h3>
    <p>Border-emphasis card style.</p>
  </wc-card>

On this page

Properties

Events

Methods

CSS Custom Properties