Composition

Combining components to create larger structures.

html

<div class="comp comp--stacked" style="--accent:#D9C8F0;" role="img" aria-label="Composed panel, layout stacked, header present, footer present">
  <div class="comp__slot comp__slot--header">Header</div>
  <div class="comp__slot comp__slot--body">Body</div>
  <div class="comp__slot comp__slot--footer">Footer</div>
</div>
<style>
.comp { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; gap: 8px; border: 1.5px dashed #24143030; }
.comp--stacked { flex-direction: column; }
.comp--inline { flex-direction: row; }
.comp__slot { padding: 14px; border-radius: 8px; background: #24143010; text-align: center; flex: 1; box-sizing: border-box; }
.comp__slot--header, .comp__slot--footer { background: var(--accent); font-weight: 600; }
</style>

tailwind

<div class="comptw comptw--stacked font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border flex gap-2 border border-dashed border-[#24143030]" style="--accent:#D9C8F0;" role="img" aria-label="Composed panel, layout stacked, header present, footer present">
  <div class="p-3.5 rounded-lg text-center flex-1 box-border font-semibold" style="background:#D9C8F0;">Header</div>
  <div class="p-3.5 rounded-lg text-center flex-1 box-border bg-[#24143010]">Body</div>
  <div class="p-3.5 rounded-lg text-center flex-1 box-border font-semibold" style="background:#D9C8F0;">Footer</div>
</div>
<style>
.comptw--stacked { flex-direction: column; }
.comptw--inline { flex-direction: row; }
</style>

react

export function Composition({
  showHeader = true,
  showFooter = true,
  layout = "stacked",
  accent = "#D9C8F0",
}) {
  const label = `Composed panel, layout ${layout}, header ${showHeader ? "present" : "absent"}, footer ${showFooter ? "present" : "absent"}`;
  return (
    <div role="img" aria-label={label} style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box",
      display: "flex", flexDirection: layout === "stacked" ? "column" : "row", gap: 8, border: "1.5px dashed #24143030" }}>
      {showHeader && <div style={{ padding: 14, borderRadius: 8, textAlign: "center", flex: 1, boxSizing: "border-box", background: accent, fontWeight: 600 }}>Header</div>}
      <div style={{ padding: 14, borderRadius: 8, textAlign: "center", flex: 1, boxSizing: "border-box", background: "#24143010" }}>Body</div>
      {showFooter && <div style={{ padding: 14, borderRadius: 8, textAlign: "center", flex: 1, boxSizing: "border-box", background: accent, fontWeight: 600 }}>Footer</div>}
    </div>
  );
}