Label

Fruits

Apple

Banana

Orange

Other

Fruits

Apple

Banana

Other

Scratchpad

200

250

300

400

500

A sentence goes here with an inline and even an inline Badge and a chip without actionable parts Chip and stuff

First name

MLB team

Color

DtBox V1

Padding + Surface Combos

Box demo

<dt-stack gap="200">
  <dt-box padding="200" surface="secondary">Box demo</dt-box>
  <dt-box padding="400" surface="moderate">Box demo</dt-box>
  <dt-box padding="100" surface="positive-subtle">Box demo</dt-box>
  <dt-box padding="100" surface="critical-subtle">Box demo</dt-box>
  <dt-box padding="200" surface="brand">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

`as` Prop Variants

DtBox renders as different HTML elements via the as prop. Inspect elements to verify the rendered tag.

Box demo

<dt-stack gap="200">
  <dt-box as="div" padding="100" surface="secondary">Box demo</dt-box>
  <dt-box as="section" padding="100" surface="secondary">Box demo</dt-box>
  <dt-box as="header" padding="100" surface="secondary">Box demo</dt-box>
  <dt-box as="nav" padding="100" surface="secondary">Box demo</dt-box>
  <dt-box as="article" padding="100" surface="secondary">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Padding Cascade

Specific axes override shorthand: paddingInline overrides padding for left/right, paddingBlockStart overrides paddingBlock for top.

Box demo

<dt-stack gap="200">
  <dt-box padding="100" surface="moderate">Box demo</dt-box>
  <dt-box padding="100" padding-inline="400" surface="moderate">Box demo</dt-box>
  <dt-box padding="100" padding-block="400" surface="moderate">Box demo</dt-box>
  <dt-box padding="100" padding-inline="200" padding-inline-start="500" surface="moderate">Box demo</dt-box>
  <dt-box padding="100" padding-block="200" padding-block-start="500" surface="moderate">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Nested Inheritance Isolation

@property registrations prevent custom property inheritance. Inner boxes should NOT inherit outer padding or surface.

Outer box

Inner box (should not inherit outer)

Inner box, no props (should have 0 padding, transparent surface)

<dt-box padding="400" surface="brand">
  <dt-stack gap="100">
    <div>Outer box</div>
    <dt-box padding="100" surface="secondary">Inner box (should not inherit outer)</dt-box>
    <dt-box>Inner box, no props (should have 0 padding, transparent surface)</dt-box>
  </dt-stack>
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Surface Opaque Variants

Opaque surfaces use solid colors instead of alpha transparency, preventing bleed-through on layered backgrounds.

Parent surface="brand"

Box demo

<dt-box padding="200" surface="brand">
  <dt-stack gap="100">
    <div>Parent surface="brand"</div>
    <dt-stack direction="row" gap="100">
      <dt-box padding="100" surface="primary">Box demo</dt-box>
      <dt-box padding="100" surface="primary-opaque">Box demo</dt-box>
      <dt-box padding="100" surface="secondary">Box demo</dt-box>
      <dt-box padding="100" surface="secondary-opaque">Box demo</dt-box>
    </dt-stack>
  </dt-stack>
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Utility Class Escape Hatch

DtBox accepts standard class attributes for one-off styling that falls outside its prop API. Utility classes compose naturally with the component.

Box demo

<dt-box padding="200" surface="moderate" class="d-bar-400 d-bs-sm">
  Box demo
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Box demo

Scroll content below the sticky box...

...end of scroll content.

<div style="position: relative; height: 120px; overflow: auto; border: 1px solid var(--dt-color-border-default);">
  <dt-box
    padding="100"
    surface="secondary"
    position="sticky"
    inset-block-start="0"
  >
    <dt-text kind="body" :size="200">Box demo</dt-text>
  </dt-box>
  <dt-box padding="200">
    <dt-text kind="body" :size="200">Scroll content below the sticky box...</dt-text>
    <div class="d-h-400"></div>
    <dt-text kind="body" :size="200">...end of scroll content.</dt-text>
  </dt-box>
</div>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

DtBox

Basic padding + surface

Box demo

<dt-stack direction="row" gap="200">
  <dt-box padding="200" surface="primary" border-width="100">Box demo</dt-box>
  <dt-box padding="300" surface="moderate" border-width="100">Box demo</dt-box>
  <dt-box padding="400" surface="brand-subtle" border-width="100">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Padding cascade

Box demo

<dt-stack direction="row" gap="200">
  <dt-box padding="400" surface="secondary" border-width="100">Box demo</dt-box>
  <dt-box padding="400" padding-inline="100" surface="secondary" border-width="100">Box demo</dt-box>
  <dt-box padding="400" padding-inline="100" padding-inline-start="0" surface="secondary" border-width="100">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Polymorphic as

Box demo

<dt-stack gap="100">
  <dt-box as="section" padding="200" surface="info-subtle" border-width="100">Box demo</dt-box>
  <dt-box as="nav" padding="200" surface="warning-subtle" border-width="100">Box demo</dt-box>
  <dt-box as="header" padding="200" surface="positive-subtle" border-width="100">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Nested inheritance isolation

Outer box

Inner box (independent)

Inner box, no padding (should be 0)

<dt-box padding="500" surface="brand-subtle" border-width="100">
  <dt-stack gap="200">
    <div>Outer box</div>
    <dt-box padding="200" surface="primary" border-width="100">Inner box (independent)</dt-box>
    <dt-box surface="critical-subtle" border-width="100">Inner box, no padding (should be 0)</dt-box>
  </dt-stack>
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Positioning props

Box demo

<dt-box padding="200" surface="primary" border-width="100" border-radius="200" position="sticky" inset-block-start="0">
  Box demo
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Card compositions

Box demo

<dt-stack direction="row" gap="200">
  <dt-box padding="300" surface="primary" border-width="100" border-radius="300" shadow="card">Box demo</dt-box>
  <dt-box padding="300" surface="primary" border-width="100" border-radius="400" shadow="medium">Box demo</dt-box>
  <dt-box padding="300" surface="brand-subtle" border-color="brand" border-width="100" border-radius="200">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Shadow scale

Box demo

<dt-stack direction="row" gap="300">
  <dt-box padding="200" surface="primary" border-radius="200" shadow="small">Box demo</dt-box>
  <dt-box padding="200" surface="primary" border-radius="200" shadow="medium">Box demo</dt-box>
  <dt-box padding="200" surface="primary" border-radius="200" shadow="large">Box demo</dt-box>
  <dt-box padding="200" surface="primary" border-radius="200" shadow="extra-large">Box demo</dt-box>
  <dt-box padding="200" surface="primary" border-radius="200" shadow="card">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Border radius variants

0 long label lorem
second line

200 long label lorem
second line

400 long label lorem
second line

600 long label lorem
second line

pill long label lorem

circle

<dt-stack direction="row" gap="200" align="center">
  <dt-box padding="100" surface="moderate" border-width="100" border-radius="0">0 long label lorem <br> second line</dt-box>
  <dt-box padding="100" surface="moderate" border-width="100" border-radius="200">200 long label lorem <br> second line</dt-box>
  <dt-box padding="100" surface="moderate" border-width="100" border-radius="400">400 long label lorem <br> second line</dt-box>
  <dt-box padding="100" surface="moderate" border-width="100" border-radius="600">600 long label lorem <br> second line</dt-box>
  <dt-box padding="100" surface="moderate" border-width="100" border-radius="pill">pill long label lorem</dt-box>
  <dt-box padding="100" surface="moderate" border-width="100" border-radius="circle">circle</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

No border props = invisible border

Box demo (no border props)

Box demo (with border props)

<dt-stack direction="row" gap="200">
  <dt-box padding="200" surface="secondary">Box demo (no border props)</dt-box>
  <dt-box padding="200" surface="secondary" border-width="100">Box demo (with border props)</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Layout token sizing

Box demo

<dt-stack direction="row" gap="200">
  <dt-box padding="200" surface="secondary" border-width="100" inline-size="300">Box demo</dt-box>
  <dt-box padding="200" surface="secondary" border-width="100" inline-size="500">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Class escape hatch for arbitrary sizing

Box demo

<dt-stack gap="200">
  <dt-box padding="200" surface="secondary" border-width="100" class="d-wmx-464">Box demo</dt-box>
  <dt-box padding="200" surface="secondary" border-width="100" class="d-hmn-164">Box demo</dt-box>
</dt-stack>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Overflow + borderRadius clipping

Tall content clipped by overflow="hidden" and borderRadius="400"

<dt-box surface="secondary" border-width="100" border-radius="400" overflow="hidden" inline-size="500" max-block-size="200">
  <div class="d-p-200 d-bgc-brand-subtle d-h-400">
    Tall content clipped by overflow="hidden" and borderRadius="400"
  </div>
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Scrollbar integration

Scrollable item 1

Scrollable item 2

Scrollable item 3

Scrollable item 4

Scrollable item 5

Scrollable item 6

Scrollable item 7

Scrollable item 8

Scrollable item 9

Scrollable item 10

Scrollable item 11

Scrollable item 12

Scrollable item 13

Scrollable item 14

Scrollable item 15

Scrollable item 16

Scrollable item 17

Scrollable item 18

Scrollable item 19

Scrollable item 20

<dt-box padding="200" surface="secondary" border-width="100" border-radius="200" scrollbar="always" max-block-size="300">
  <dt-stack gap="100">
    <div v-for="i in 20" :key="i">Scrollable item {{ i }}</div>
  </dt-stack>
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Scrollable item 1

Scrollable item 2

Scrollable item 3

Scrollable item 4

Scrollable item 5

Scrollable item 6

Scrollable item 7

Scrollable item 8

Scrollable item 9

Scrollable item 10

Scrollable item 11

Scrollable item 12

Scrollable item 13

Scrollable item 14

Scrollable item 15

Scrollable item 16

Scrollable item 17

Scrollable item 18

Scrollable item 19

Scrollable item 20

<dt-box padding="200" surface="secondary" border-width="100" border-radius="200" scrollbar="leave" max-block-size="300">
  <dt-stack gap="100">
    <div v-for="i in 20" :key="i">Scrollable item {{ i }}</div>
  </dt-stack>
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Scrollable item 1 (native scrollbar)

Scrollable item 2 (native scrollbar)

Scrollable item 3 (native scrollbar)

Scrollable item 4 (native scrollbar)

Scrollable item 5 (native scrollbar)

Scrollable item 6 (native scrollbar)

Scrollable item 7 (native scrollbar)

Scrollable item 8 (native scrollbar)

Scrollable item 9 (native scrollbar)

Scrollable item 10 (native scrollbar)

Scrollable item 11 (native scrollbar)

Scrollable item 12 (native scrollbar)

Scrollable item 13 (native scrollbar)

Scrollable item 14 (native scrollbar)

Scrollable item 15 (native scrollbar)

Scrollable item 16 (native scrollbar)

Scrollable item 17 (native scrollbar)

Scrollable item 18 (native scrollbar)

Scrollable item 19 (native scrollbar)

Scrollable item 20 (native scrollbar)

<dt-box padding="200" surface="secondary" border-width="100" border-radius="200" overflow="auto" max-block-size="300">
  <dt-stack gap="100">
    <div v-for="i in 20" :key="i">Scrollable item {{ i }} (native scrollbar)</div>
  </dt-stack>
</dt-box>

Raw HTML renders visuals only. You may need to add JS to replicate its functionality.

Scratchpad

DtBox V1

Padding + Surface Combos

as Prop Variants

Padding Cascade

Nested Inheritance Isolation

Surface Opaque Variants

Utility Class Escape Hatch

DtBox

`as` Prop Variants