ContentBox

Rounded rectangle container with multi-line text and automatic y-offset between lines.

Component

src/lib/deck/patterns/ContentBox.tsx

Props

Prop	Type	Description
x	number	X position in SVG coordinate space (640x360)
y	number	Y position in SVG coordinate space (640x360)
width	number	Box width in SVG units
height	number	Box height in SVG units
lines	Line[]	Array of text line objects (see below)
bg	string?	Fill color (default: `#f5f5f5`)
borderColor	string?	Stroke color for the rounded rect
borderWidth	number?	Border stroke width (default: 1)
radius	number?	Corner radius (default: 5)
padding	number?	Internal padding (default: 10)

Line object

Each entry in the lines array:

Field	Type	Description
text	string	The text content for this line
fontSize	number	Font size in px
fontWeight	string?	`"bold"` or `"normal"` (default)
fill	string?	Text color (default: `#1d1d1d`)
dy	number?	Y offset from previous line (defaults to fontSize * 1.4)

Usage

import { ContentBox } from "@/lib/deck/patterns/ContentBox";

<ContentBox
  x={12}
  y={90}
  width={280}
  height={240}
  bg="#f5f5f5"
  radius={5}
  padding={10}
  lines={[
    { text: "Problem", fontSize: 18, fontWeight: "bold" },
    { text: "A phone plan charges $20 base", fontSize: 16 },
    { text: "plus $5 per hour of usage.", fontSize: 16 },
    { text: "C = $20 + $5 x h", fontSize: 24, fontWeight: "bold", fill: "#1791e8" },
  ]}
/>

Auto y-offset

Lines are rendered as SVG <text> elements. The component automatically calculates vertical spacing between lines based on each line's fontSize plus a consistent gap. This replaces the manual margin/padding calculations from the old HTML system.

Size reference

For a ~250px column width in the 640x360 viewport:

Element	Small	Default	Large
Header	14px	18px	24px
Body	13px	16px	18px
Main content	24px	36px	48px