Card Body

Main card content.

html

<div class="cardbody cardbody--comfortable" style="--c:#D9C8F0;">
  <h3 class="cardbody__heading">Release notes</h3>
  <p class="cardbody__text">Version 4.2 improves cold-start latency by 30% and fixes several sync bugs.</p>
</div>
<style>
.cardbody { font: 14px/1.55 system-ui, sans-serif; color: #241430; border-left: 3px solid var(--c); padding: 16px; max-width: 300px; background: #FAF7F2; }
.cardbody--compact { padding: 10px; }
.cardbody__heading { margin: 0 0 6px; font-size: 15px; }
.cardbody__text { margin: 0; font-size: 13px; opacity: .85; }
</style>

tailwind

<div class="cardbody-tw cardbody-tw--comfortable font-sans text-[14px] leading-relaxed text-[#241430] border-l-[3px] p-4 max-w-xs bg-[#FAF7F2]" style="border-left-color:#D9C8F0;">
  <h3 class="m-0 mb-1.5 text-[15px]">Release notes</h3>
  <p class="m-0 text-[13px] opacity-85">Version 4.2 improves cold-start latency by 30% and fixes several sync bugs.</p>
</div>
<style>
.cardbody-tw--compact { padding: 10px; }
</style>

react

export function CardBody({
  heading = "Release notes",
  body = "Version 4.2 improves cold-start latency by 30% and fixes several sync bugs.",
  density = "comfortable",
  color = "#D9C8F0",
}) {
  return (
    <div style={{ font: "14px/1.55 system-ui, sans-serif", color: "#241430", borderLeft: "3px solid " + color, padding: density === "compact" ? 10 : 16, maxWidth: 300, background: "#FAF7F2" }}>
      <h3 style={{ margin: "0 0 6px", fontSize: 15 }}>{heading}</h3>
      <p style={{ margin: 0, fontSize: 13, opacity: 0.85 }}>{body}</p>
    </div>
  );
}