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