Card

Card is a native web component that groups related content onto a surface with a border, rounded corners and a shadow. Use it to highlight blocks of information, summaries or grouped actions. The header and footer slots hide automatically when empty, and the hover attribute adds an elevation on mouse over.

Preview

<pura-card hover>
  <span slot="header">Pro Plan</span>
  Unlimited access to all features, priority support and advanced reports for your team.
  <div slot="footer">
    <pura-button variant="primary">Subscribe</pura-button>
    <pura-button variant="ghost">Learn more</pura-button>
  </div>
</pura-card>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/card.js"></script>

import "./pura/lib/card.js";