Layout stops #
Use d-hmx-{stop} to set a fixed maximum height for an element using layout token stops. The hyphen before the number indicates a layout token reference, e.g. d-hmx-100 outputs max-block-size: var(--dt-layout-100) (64px). This can be combined with d-h{n}p and d-hmn-{stop} to have an element fill a certain height range.
<div class="d-hmx-100">...</div> <!-- max-block-size: var(--dt-layout-100) = 64px / 6.4rem --> <div class="d-hmx-200">...</div> <!-- max-block-size: var(--dt-layout-200) = 128px / 12.8rem --> <div class="d-hmx-400">...</div> <!-- max-block-size: var(--dt-layout-400) = 256px / 25.6rem -->
Percentages #
Use d-hmx{n}p to set a maximum height percentage for an element. No hyphen before the number, p suffix indicates a literal percentage value. Note: d-hmx33p = 33.333% and d-hmx66p = 66.667%.
<div class="d-h-350"> <div class="d-h-100 d-hmx50p">1</div> </div>
Keywords #
Use keyword utilities to set maximum height using CSS keyword values.
<div class="d-hmx-auto">...</div> <div class="d-hmx-unset">...</div> <div class="d-hmx-fit-content">...</div> <div class="d-hmx-max-content">...</div> <div class="d-hmx-min-content">...</div>
Classes #
Class | Output |
|---|---|
| .d-hmx-1px | max-block-size: var(--dt-layout-1px) !important; /* 1px / 0.1rem */ |
| .d-hmx-2px | max-block-size: var(--dt-layout-2px) !important; /* 2px / 0.2rem */ |
| .d-hmx-8px | max-block-size: var(--dt-layout-8px) !important; /* 8px / 0.8rem */ |
| .d-hmx-25 | max-block-size: var(--dt-layout-25) !important; /* 16px / 1.6rem */ |
| .d-hmx-20px | max-block-size: var(--dt-layout-20px) !important; /* 20px / 2.0rem */ |
| .d-hmx-24px | max-block-size: var(--dt-layout-24px) !important; /* 24px / 2.4rem */ |
| .d-hmx-50 | max-block-size: var(--dt-layout-50) !important; /* 32px / 3.2rem */ |
| .d-hmx-75 | max-block-size: var(--dt-layout-75) !important; /* 48px / 4.8rem */ |
| .d-hmx-100 | max-block-size: var(--dt-layout-100) !important; /* 64px / 6.4rem */ |
| .d-hmx-125 | max-block-size: var(--dt-layout-125) !important; /* 80px / 8.0rem */ |
| .d-hmx-150 | max-block-size: var(--dt-layout-150) !important; /* 96px / 9.6rem */ |
| .d-hmx-175 | max-block-size: var(--dt-layout-175) !important; /* 112px / 11.2rem */ |
| .d-hmx-200 | max-block-size: var(--dt-layout-200) !important; /* 128px / 12.8rem */ |
| .d-hmx-250 | max-block-size: var(--dt-layout-250) !important; /* 160px / 16.0rem */ |
| .d-hmx-300 | max-block-size: var(--dt-layout-300) !important; /* 192px / 19.2rem */ |
| .d-hmx-350 | max-block-size: var(--dt-layout-350) !important; /* 224px / 22.4rem */ |
| .d-hmx-400 | max-block-size: var(--dt-layout-400) !important; /* 256px / 25.6rem */ |
| .d-hmx-450 | max-block-size: var(--dt-layout-450) !important; /* 288px / 28.8rem */ |
| .d-hmx-500 | max-block-size: var(--dt-layout-500) !important; /* 320px / 32.0rem */ |
| .d-hmx-550 | max-block-size: var(--dt-layout-550) !important; /* 352px / 35.2rem */ |
| .d-hmx-600 | max-block-size: var(--dt-layout-600) !important; /* 384px / 38.4rem */ |
| .d-hmx-650 | max-block-size: var(--dt-layout-650) !important; /* 416px / 41.6rem */ |
| .d-hmx-700 | max-block-size: var(--dt-layout-700) !important; /* 448px / 44.8rem */ |
| .d-hmx-750 | max-block-size: var(--dt-layout-750) !important; /* 480px / 48.0rem */ |
| .d-hmx-800 | max-block-size: var(--dt-layout-800) !important; /* 512px / 51.2rem */ |
| .d-hmx-850 | max-block-size: var(--dt-layout-850) !important; /* 544px / 54.4rem */ |
| .d-hmx-900 | max-block-size: var(--dt-layout-900) !important; /* 576px / 57.6rem */ |
| .d-hmx-950 | max-block-size: var(--dt-layout-950) !important; /* 608px / 60.8rem */ |
| .d-hmx-1000 | max-block-size: var(--dt-layout-1000) !important; /* 640px / 64.0rem */ |
| .d-hmx-1050 | max-block-size: var(--dt-layout-1050) !important; /* 672px / 67.2rem */ |
| .d-hmx-1100 | max-block-size: var(--dt-layout-1100) !important; /* 704px / 70.4rem */ |
| .d-hmx-1150 | max-block-size: var(--dt-layout-1150) !important; /* 736px / 73.6rem */ |
| .d-hmx-1200 | max-block-size: var(--dt-layout-1200) !important; /* 768px / 76.8rem */ |
| .d-hmx-1250 | max-block-size: var(--dt-layout-1250) !important; /* 800px / 80.0rem */ |
| .d-hmx-1300 | max-block-size: var(--dt-layout-1300) !important; /* 832px / 83.2rem */ |
| .d-hmx-1350 | max-block-size: var(--dt-layout-1350) !important; /* 864px / 86.4rem */ |
| .d-hmx-1400 | max-block-size: var(--dt-layout-1400) !important; /* 896px / 89.6rem */ |
| .d-hmx-1450 | max-block-size: var(--dt-layout-1450) !important; /* 928px / 92.8rem */ |
| .d-hmx-1500 | max-block-size: var(--dt-layout-1500) !important; /* 960px / 96.0rem */ |
| .d-hmx-1550 | max-block-size: var(--dt-layout-1550) !important; /* 992px / 99.2rem */ |
| .d-hmx-1600 | max-block-size: var(--dt-layout-1600) !important; /* 1024px / 102.4rem */ |
| .d-hmx10p | max-block-size: 10% !important; |
| .d-hmx15p | max-block-size: 15% !important; |
| .d-hmx20p | max-block-size: 20% !important; |
| .d-hmx25p | max-block-size: 25% !important; |
| .d-hmx30p | max-block-size: 30% !important; |
| .d-hmx33p | max-block-size: 33.333% !important; |
| .d-hmx40p | max-block-size: 40% !important; |
| .d-hmx50p | max-block-size: 50% !important; |
| .d-hmx60p | max-block-size: 60% !important; |
| .d-hmx66p | max-block-size: 66.667% !important; |
| .d-hmx70p | max-block-size: 70% !important; |
| .d-hmx75p | max-block-size: 75% !important; |
| .d-hmx80p | max-block-size: 80% !important; |
| .d-hmx85p | max-block-size: 85% !important; |
| .d-hmx90p | max-block-size: 90% !important; |
| .d-hmx100p | max-block-size: 100% !important; |
| .d-hmx-auto | max-block-size: auto !important; |
| .d-hmx-unset | max-block-size: unset !important; |
| .d-hmx-fit-content | max-block-size: fit-content !important; |
| .d-hmx-max-content | max-block-size: max-content !important; |
| .d-hmx-min-content | max-block-size: min-content !important; |