Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 9782

7.14 Height

Is Responsive: breakpoint modifiers
It is rare to use height but at times it is useful to set a matching set of cards or setting up a dashboard.
ClassesEffect
.h_autoheight: auto
.h_0height: 0vh
.h_10height: 10vh
.h_20height: 20vh
.h_30height: 30vh
.h_40height: 40vh
.h_50height: 50vh
.h_60height: 60vh
.h_70height: 70vh
.h_80height: 80vh
.h_90height: 90vh
.h_100height: 100vh
.h_unsetheight: unset

Example

Default styling

.h_auto
.h_0
.h_10
.h_20
.h_30
.h_40
.h_50
.h_60
.h_70
.h_80
.h_90
.h_100
.h_100p (percent)
.h_60.h_unset:lg
<div class="flex p_4 bg_primary-4">
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_auto">.h_auto</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_0">.h_0</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_10">.h_10</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_20">.h_20</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_30">.h_30</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_40">.h_40</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_50">.h_50</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_60">.h_60</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_70">.h_70</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_80">.h_80</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_90">.h_90</div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_100">.h_100 </div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_100p">.h_100p (percent) </div>
<div class="flex_auto br_solid br_white-8 br_1 bg_primary h_60 h_unset:lg">.h_60.h_unset:lg</div>
</div>
Copy Code