FREE CSS COMPONENT

Card

Use cards when related information needs a clear visual boundary without overloading the interface.

Live preview

Salesforce UI

Reusable interface patterns built for maintainability.

HTML

<article class="demo-card">
  <h3>Salesforce UI</h3>
  <p>Reusable interface patterns built for maintainability.</p>
</article>

CSS

.demo-card{padding:24px;border:1px solid #ddd;border-radius:10px;background:#fff;box-shadow:0 14px 35px rgba(0,0,0,.08)}.demo-card h3{margin:0 0 8px;color:#111;font:600 20px Inter,sans-serif}.demo-card p{margin:0;color:#666;font:14px/1.6 Inter,sans-serif}