Entity Card

Generic object summary.

html

<article class="entitycard entitycard--outlined" style="--c:#BFD9F2;">
  <span class="entitycard__mark" aria-hidden="true"></span>
  <div class="entitycard__text">
    <h3 class="entitycard__title">Northbank Studio</h3>
    <span class="entitycard__subtitle">Design agency</span>
    <span class="entitycard__meta">24 members · London</span>
  </div>
</article>
<style>
.entitycard { display: flex; gap: 12px; align-items: flex-start; font: 14px system-ui, sans-serif; color: #241430; border-radius: 10px; padding: 14px; max-width: 300px; }
.entitycard--outlined { border: 1.5px solid var(--c); background: #FAF7F2; }
.entitycard--filled { background: var(--c); }
.entitycard__mark { width: 34px; height: 34px; border-radius: 8px; background: var(--c); flex: none; }
.entitycard--filled .entitycard__mark { background: #FAF7F2; }
.entitycard__title { margin: 0; font-size: 15px; }
.entitycard__subtitle { display: block; font-size: 12px; opacity: .75; }
.entitycard__meta { display: block; font-size: 11px; opacity: .6; margin-top: 4px; }
</style>

tailwind

<article class="entitycard-tw entitycard-tw--outlined flex gap-3 items-start font-sans text-[14px] text-[#241430] rounded-[10px] p-3.5 max-w-xs" style="--c:#BFD9F2;">
  <span class="entitycard-tw__mark w-[34px] h-[34px] rounded-lg flex-none" style="background:var(--c);" aria-hidden="true"></span>
  <div>
    <h3 class="m-0 text-[15px]">Northbank Studio</h3>
    <span class="block text-xs opacity-75">Design agency</span>
    <span class="block text-[11px] opacity-60 mt-1">24 members · London</span>
  </div>
</article>
<style>
.entitycard-tw--outlined { border: 1.5px solid var(--c); background: #FAF7F2; }
.entitycard-tw--filled { background: var(--c); }
.entitycard-tw--filled .entitycard-tw__mark { background: #FAF7F2 !important; }
</style>

react

export function EntityCard({
  title = "Northbank Studio",
  subtitle = "Design agency",
  meta = "24 members · London",
  variant = "outlined",
  color = "#BFD9F2",
}) {
  const wrap = variant === "filled" ? { background: color, border: "none" } : { border: "1.5px solid " + color, background: "#FAF7F2" };
  const markBg = variant === "filled" ? "#FAF7F2" : color;
  return (
    <article style={{ display: "flex", gap: 12, alignItems: "flex-start", font: "14px system-ui, sans-serif", color: "#241430", borderRadius: 10, padding: 14, maxWidth: 300, ...wrap }}>
      <span aria-hidden="true" style={{ width: 34, height: 34, borderRadius: 8, background: markBg, flex: "none" }} />
      <div>
        <h3 style={{ margin: 0, fontSize: 15 }}>{title}</h3>
        <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>{subtitle}</span>
        <span style={{ display: "block", fontSize: 11, opacity: 0.6, marginTop: 4 }}>{meta}</span>
      </div>
    </article>
  );
}