Tightdata-layout="tight"
module padding 64px
module gap 24px
eyebrow 8px · subcopy 8px
paragraph 12px
Balanceddata-layout="balanced"
module padding 96px
module gap 40px
eyebrow 12px · subcopy 12px
paragraph 16px
Opendata-layout="open"
module padding 128px
module gap 64px
eyebrow 16px · subcopy 24px
paragraph 24px
smmodule-padding-sm
64px
mdmodule-padding-md
96px
lgmodule-padding-lg
128px
xlmodule-padding-xl
160px

A module is a band or block. Its padding is above and below its content; its gap is between its own parts, here the header and what follows it. Inside the header, the eyebrow binds to the heading (--dt-layout-text-eyebrow) and the lead follows the pair (--dt-layout-text-subcopy); --dt-layout-text-paragraph sits between one paragraph and the next. Configure sets Text and Modules apart from the rest of the layout. The padding steps, drawn at half size at the balanced character, let one band take more room than the next, or more above than below: Section's spacingTop and spacingBottom.