Depths

Depths are light background surfaces. data-dn-depth="1" is pure white, and each higher depth is slightly grayer.

Depth 1

Depth 2

Depth 3

Depth 4

Depth 5

Depth 6

Depth 7

const depths = ["1", "2", "3", "4", "5", "6", "7"] as const;

export default function DepthsExample() {
  return (
    <div style={{ width: "100%" }}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "8px",
          padding: "var(--dn-size-control-pad)",
          width: "100%",
        }}
      >
        {depths.map((depth) => (
          <div
            key={depth}
            data-dn-border=""
            data-dn-depth={depth}
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "var(--dn-size-control-gap)",
              padding: "var(--dn-size-control-pad)",
              width: "100%",
            }}
          >
            Depth {depth}
          </div>
        ))}
      </div>
    </div>
  );
}

Depths only set background, so they can be combined with presentations.

Depth 1 card

Depth 3 card

Depth 5 card

export default function DepthCardExample() {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ display: "grid", gap: "8px" }}>
        <div data-dn-presentation="card" data-dn-depth="1">
          Depth 1 card
        </div>
        <div data-dn-presentation="card" data-dn-depth="3">
          Depth 3 card
        </div>
        <div data-dn-presentation="card" data-dn-depth="5">
          Depth 5 card
        </div>
      </div>
    </div>
  );
}