Card patterns

A code card and an action card, both built from the same scale.

npm install @reuse-sh/shadows

Order a test print

A 20 × 15 cm proof of Coral sky on the same cotton paper, shipped in two days.

import "@reuse-sh/shadows/styles.css";

// <div class="reuse-card-frame">
//   <div class="reuse-card reuse-card-action reuse-shadow-ring-xs">…</div>
// </div>
const frame = document.createElement("div");
frame.className = "reuse-card-frame";
const card = frame.appendChild(document.createElement("div"));
card.className = "reuse-card reuse-card-action reuse-shadow-ring-xs";

import "@reuse-sh/shadows/styles.css";

export function ActionCard({ title, text, action }) {
  return (
    <div className="reuse-card-frame">
      <div className="reuse-card reuse-card-action reuse-shadow-ring-xs">
        <div>
          <h3>{title}</h3>
          <p>{text}</p>
        </div>
        {action}
      </div>
    </div>
  );
}