Card

  <wc-card>
   <wc-card-content style="min-width: 18rem;padding-block: 1rem;">
      <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 actionable="true">
    <wc-card-content style="min-width: 18rem;padding-block: 1rem;">
      <h3 class="text-title">Order Summary</h3>
      <p class="text-body">3 items in your cart</p>
    </wc-card-content>
  </wc-card>

  <wc-card variant="elevated" style="width: 100%;">
    <wc-card-content style="min-width: 18rem;padding-block: 1rem;">
      <h3>Elevated</h3>
      <p>Default surface with elevation.</p>
    </wc-card-content>
  </wc-card>

  <wc-card variant="filled" style="width: 100%;">
    <wc-card-content style="min-width: 18rem;padding-block: 1rem;">
      <h3>Filled</h3>
      <p>Container-emphasis card style.</p>
    </wc-card-content>
  </wc-card>

  <wc-card variant="outlined" style="width: 100%;">
    <wc-card-content style="min-width: 18rem;padding-block: 1rem;">
      <h3>Outlined</h3>
      <p>Border-emphasis card style.</p>
    </wc-card-content>
  </wc-card>