Empty Card

Card representing missing content.

html

<div class="emptycard emptycard--inbox" style="--c:#D9C8F0;">
  <svg class="emptycard__icon" viewBox="0 0 40 40" aria-hidden="true">
    <circle cx="20" cy="20" r="18" fill="var(--c)" opacity="0.5"/>
    <path class="emptycard__icon-inbox" d="M10 20h6l2 4h4l2-4h6" fill="none" stroke="#241430" stroke-width="2"/>
    <circle class="emptycard__icon-search" cx="18" cy="18" r="6" fill="none" stroke="#241430" stroke-width="2"/>
    <path class="emptycard__icon-search" d="M23 23l6 6" stroke="#241430" stroke-width="2" stroke-linecap="round"/>
    <path class="emptycard__icon-error" d="M20 12v10" stroke="#241430" stroke-width="2" stroke-linecap="round"/>
    <circle class="emptycard__icon-error" cx="20" cy="27" r="1.4" fill="#241430"/>
  </svg>
  <p class="emptycard__message">No invoices yet</p>
  <button type="button" class="emptycard__action">Create invoice</button>
</div>
<style>
.emptycard { text-align: center; font: 14px system-ui, sans-serif; color: #241430; padding: 28px 20px; max-width: 260px; }
.emptycard__icon { width: 48px; height: 48px; margin-bottom: 10px; }
.emptycard__icon-inbox, .emptycard__icon-search, .emptycard__icon-error { display: none; }
.emptycard--inbox .emptycard__icon-inbox { display: block; }
.emptycard--search .emptycard__icon-search { display: block; }
.emptycard--error .emptycard__icon-error { display: block; }
.emptycard__message { margin: 0 0 12px; opacity: .75; }
.emptycard__action { border: none; border-radius: 8px; padding: 8px 16px; font: 600 13px system-ui, sans-serif; cursor: pointer; background: var(--c); color: #241430; }
.emptycard__action:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
</style>

tailwind

<div class="emptycard-tw emptycard-tw--inbox text-center font-sans text-[14px] text-[#241430] py-7 px-5 max-w-xs" style="--c:#D9C8F0;">
  <svg class="mx-auto mb-2.5 w-12 h-12" viewBox="0 0 40 40" aria-hidden="true">
    <circle cx="20" cy="20" r="18" fill="var(--c)" opacity="0.5"/>
    <path class="emptycard-tw__icon-inbox hidden" d="M10 20h6l2 4h4l2-4h6" fill="none" stroke="#241430" stroke-width="2"/>
    <circle class="emptycard-tw__icon-search hidden" cx="18" cy="18" r="6" fill="none" stroke="#241430" stroke-width="2"/>
    <path class="emptycard-tw__icon-search hidden" d="M23 23l6 6" stroke="#241430" stroke-width="2" stroke-linecap="round"/>
    <path class="emptycard-tw__icon-error hidden" d="M20 12v10" stroke="#241430" stroke-width="2" stroke-linecap="round"/>
    <circle class="emptycard-tw__icon-error hidden" cx="20" cy="27" r="1.4" fill="#241430"/>
  </svg>
  <p class="m-0 mb-3 opacity-75">No invoices yet</p>
  <button type="button" class="border-none rounded-lg px-4 py-2 font-semibold text-[13px] cursor-pointer text-[#241430]" style="background:var(--c);">Create invoice</button>
</div>
<style>
.emptycard-tw--inbox .emptycard-tw__icon-inbox { display: block !important; }
.emptycard-tw--search .emptycard-tw__icon-search { display: block !important; }
.emptycard-tw--error .emptycard-tw__icon-error { display: block !important; }
</style>

react

export function EmptyCard({
  message = "No invoices yet",
  actionLabel = "Create invoice",
  showAction = true,
  icon = "inbox",
  color = "#D9C8F0",
}) {
  return (
    <div style={{ textAlign: "center", font: "14px system-ui, sans-serif", color: "#241430", padding: "28px 20px", maxWidth: 260 }}>
      <svg viewBox="0 0 40 40" aria-hidden="true" style={{ width: 48, height: 48, margin: "0 auto 10px" }}>
        <circle cx="20" cy="20" r="18" fill={color} opacity="0.5" />
        {icon === "inbox" && <path d="M10 20h6l2 4h4l2-4h6" fill="none" stroke="#241430" strokeWidth="2" />}
        {icon === "search" && (
          <>
            <circle cx="18" cy="18" r="6" fill="none" stroke="#241430" strokeWidth="2" />
            <path d="M23 23l6 6" stroke="#241430" strokeWidth="2" strokeLinecap="round" />
          </>
        )}
        {icon === "error" && (
          <>
            <path d="M20 12v10" stroke="#241430" strokeWidth="2" strokeLinecap="round" />
            <circle cx="20" cy="27" r="1.4" fill="#241430" />
          </>
        )}
      </svg>
      <p style={{ margin: "0 0 12px", opacity: 0.75 }}>{message}</p>
      {showAction && (
        <button type="button" style={{ border: "none", borderRadius: 8, padding: "8px 16px", fontWeight: 600, fontSize: 13, cursor: "pointer", background: color, color: "#241430" }}>
          {actionLabel}
        </button>
      )}
    </div>
  );
}