Levels

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

export default function LevelsExample() {
  return (
    <div style={{ display: "grid", gap: "8px" }}>
      <div
        data-dn-level="1"
        style={{
          border: "1px solid var(--dn-color-border)",
          borderRadius: "6px",
          padding: "12px",
        }}
      >
        Level 1
      </div>
      <div
        data-dn-level="2"
        style={{
          border: "1px solid var(--dn-color-border)",
          borderRadius: "6px",
          padding: "12px",
        }}
      >
        Level 2
      </div>
      <div
        data-dn-level="3"
        style={{
          border: "1px solid var(--dn-color-border)",
          borderRadius: "6px",
          padding: "12px",
        }}
      >
        Level 3
      </div>
      <div
        data-dn-level="4"
        style={{
          border: "1px solid var(--dn-color-border)",
          borderRadius: "6px",
          padding: "12px",
        }}
      >
        Level 4
      </div>
      <div
        data-dn-level="5"
        style={{
          border: "1px solid var(--dn-color-border)",
          borderRadius: "6px",
          padding: "12px",
        }}
      >
        Level 5
      </div>
      <div
        data-dn-level="6"
        style={{
          border: "1px solid var(--dn-color-border)",
          borderRadius: "6px",
          padding: "12px",
        }}
      >
        Level 6
      </div>
      <div
        data-dn-level="7"
        style={{
          border: "1px solid var(--dn-color-border)",
          borderRadius: "6px",
          padding: "12px",
        }}
      >
        Level 7
      </div>
    </div>
  );
}

Levels only set background, so they can be layered with presentations.

export default function LevelCardExample() {
  return (
    <div style={{ display: "grid", gap: "8px" }}>
      <div data-dn-presentation="card" data-dn-level="1">
        Level 1 card
      </div>
      <div data-dn-presentation="card" data-dn-level="3">
        Level 3 card
      </div>
      <div data-dn-presentation="card" data-dn-level="5">
        Level 5 card
      </div>
    </div>
  );
}