ContainersFigure

Figure

An image, a screenshot, or a content block wrapped in a frame with a caption. The doc-system's most-reused container.

3 chrome modesOptional captionUsed 60+ times on the site

Demo

The default is "no chrome" — a clean 1 px border around the figure. Browser and mobile modes add a frame that mimics the surrounding environment.

Browser

design.izaias.xyz/work/everyday-services-study

Screenshot here

The study's production welcome screenThe first thing a participant sees. The narrative on the left, the session card on the right.

Mobile chrome

Mobile

Mobile screenshot

The mobile question dockA 360 px-wide capture of the question dock, 3x pixel density.

Anatomy

1 px --line-strong border, 4 px radius on the outside
Optional browser chrome: three traffic-light dots and a centered URL bar
Optional mobile chrome: a 4.5 rem-wide notch at the top of the frame
Caption sits below the frame, with a title (0.8125 rem weight 500) and a body (0.8125 rem muted)
Frame padding: 24 px at default; 8 px at top for mobile (under the notch)

Implementation

figure.tsx

import { type ReactNode } from "react"
import { cn } from "@/lib/utils"

interface FigureProps {
  chrome?: "browser" | "mobile" | "none"
  url?: string
  title?: string
  caption?: string
  children: ReactNode
}

export function Figure({ chrome = "none", url, title, caption, children }: FigureProps) {
  return (
    <figure className={cn("ds-figure", chrome !== "none" && `ds-figure--${chrome}`)}>
      {chrome === "browser" ? (
        <div className="ds-figure__chrome">
          <span className="ds-figure__chrome-dot" aria-hidden="true" />
          <span className="ds-figure__chrome-dot" aria-hidden="true" />
          <span className="ds-figure__chrome-dot" aria-hidden="true" />
          {url ? <span className="ds-figure__chrome-url">{url}</span> : null}
        </div>
      ) : null}
      <div className="ds-figure__frame">
        {chrome === "mobile" ? <div className="ds-figure__notch" aria-hidden="true" /> : null}
        {children}
      </div>
      {caption ? (
        <figcaption className="ds-figure__caption">
          {title ? <span className="ds-figure__caption-title">{title}</span> : null}
          {caption}
        </figcaption>
      ) : null}
    </figure>
  )
}

Props

Prop	Type	Default	Description
`chrome`	`"browser" \| "mobile" \| "none"`	`"none"`	Frame chrome
`url`	`string`	`None`	Browser URL bar text
`title`	`string`	`None`	Caption title
`caption`	`string`	`None`	Caption body
`children`	`ReactNode`	`None`	The image or content