Height

Layout stops #

Use d-h-{stop} to set a fixed height for an element using layout token stops. The hyphen before the number indicates a layout token reference, e.g. d-h-100 outputs block-size: var(--dt-layout-100) (64px).

<div class="d-h-100">...</div>  <!-- block-size: var(--dt-layout-100) = 64px / 6.4rem -->
<div class="d-h-200">...</div>  <!-- block-size: var(--dt-layout-200) = 128px / 12.8rem -->
<div class="d-h-400">...</div>  <!-- block-size: var(--dt-layout-400) = 256px / 25.6rem -->

Percentages #

Use d-h{n}p to set a percentage height for an element. No hyphen before the number, p suffix indicates a literal percentage value. Note: d-h33p = 33.333% and d-h66p = 66.667%.

<div class="d-h-350">
  <div class="d-h25p">25%</div>
  <div class="d-h50p">50%</div>
  <div class="d-h75p">75%</div>
  <div class="d-h100p">100%</div>
</div>

Viewport #

Use viewport height utilities to size an element relative to the viewport. d-h100vh (no hyphen, literal CSS value) sets block-size: 100vh. The dynamic viewport variants use a hyphen: d-h-dvh, d-h-svh, d-h-lvh.

• dvh (dynamic) -- adapts to mobile browser chrome appearing/disappearing.
• svh (small) -- minimum viewport size, when mobile browser chrome is visible.
• lvh (large) -- maximum viewport size, when mobile browser chrome is hidden.

<div class="d-h100vh">...</div>   <!-- block-size: 100vh -->
<div class="d-h-dvh">...</div>    <!-- block-size: 100dvh -->
<div class="d-h-svh">...</div>    <!-- block-size: 100svh -->
<div class="d-h-lvh">...</div>    <!-- block-size: 100lvh -->

Keywords #

Use keyword utilities to set height using CSS keyword values.

<div class="d-h-auto">...</div>
<div class="d-h-unset">...</div>
<div class="d-h-fit-content">...</div>
<div class="d-h-max-content">...</div>
<div class="d-h-min-content">...</div>

Classes #