This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Layout

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

6 Layout

Padding, Margins, and Positions are the most common usage for Utility Classes. Layout UC's are responsive and can be postfixed with :md and with :lg to have finer control on the spacing of objects.

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

6.1 Aspect Ratio

Aspect Ratio lets you define the ratio of width to height of the container. This is a great utility for images, videos, icons and layouts that need to conform to a ratio shape as it responds. It will set the object to 100% width of the container.

classcss propertyvalue
.aspect_8x10 aspect-ratio : 8 / 10
.aspect_1x1 aspect-ratio : 1 / 1
.aspect_2x1 aspect-ratio : 2 / 1
.aspect_4x3 aspect-ratio : 4 / 3
.aspect_3x4 aspect-ratio : 3 / 4
.aspect_3x2 aspect-ratio : 3 / 2
.aspect_16x9 aspect-ratio : 16 / 9
.aspect_21x9 aspect-ratio : 21 / 9
.aspect_4x1 aspect-ratio : 4 / 1
.aspect_leaderboard aspect-ratio : 728 / 90
.aspect_skyscraper aspect-ratio : 160 / 600
.aspect_bigbox aspect-ratio : 300 / 250
.aspect_billboard aspect-ratio : 970 / 250

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

6.2 Clear

Is Responsive: breakpoint modifiers
Quickly alter the position type and location of an object with 'absolute' and 'top'

  • unset positioned block

    clear_fix

  • inital positioned block

    clear_left

  • inherit positioned block

    clear_right

  • relative positioned block

    clear_both

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

6.3 Content Query

experimental

Description: A mass improvement on how to design components with alteration based on the context rather than the page width.

Experimental: Only supported via the polyfill.

Example

NOTE:
this is not supported in any browser and will only work with the polyfill. 
<script>
const supportsContainerQueries = "container" in document.documentElement.style;
if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}
</script>
Copy Code

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

6.4 Display

Is Responsive: breakpoint modifiers
Alter the display of an object to create more complicated UI and Layouts.
classresponsive modifierscss propertyvalue
.block.block:md, .block:lg display : block
.inline.inline:md, .inline:lg display : inline
.inline-block.inline-block:md, .inline-block:lg display : inline-block
.table-cell.table-cell:md, .table-cell:lg display : table-cell
.table.table:md, .table:lg display : table
.table-row.table-row:md, .table-row:lg display : table-row
.flex.flex:md, .flex:lg display : flex
.inline-flex.inline-flex:md, .inline-flex:lg display : inline-flex
.grid.grid:md, .grid:lg display : grid
.display_contents.display_contents:md, .display_contents:lg display : contents
.display_none.display_none:md, .display_none:lg display : none

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

6.4.1 Display Nothing on Empty

This utility class is used to hide an element when it contains no content. This is super useful for creating a space that needs to be decorated but also doesn't need to be shown when empty.

Example

Does Not Have class display_none:empty and has No Content

Has class display_none:empty and has No Content

Has class display_none:empty has Content

any content including space will show the element
NOTE:
!! Whitespace counts as not empty !! 
<h2> <strong class="font_bold c_primary-n2 uppercase">Does Not Have</strong> class display_none:empty and has <strong class="font_bold c_primary-n2 uppercase">No Content</strong></h2>
<div class="p-b_3 br_solid br_primary br_1"></div>
<h2> <strong class="font_bold c_primary-n2 uppercase">Has</strong> class display_none:empty and has <strong class="font_bold c_primary-n2 uppercase">No Content</strong></h2>
<div class="p-b_3 br_solid br_primary br_1 display_none:empty"></div>
<h2> <strong class="font_bold c_primary-n2 uppercase">Has</strong> class display_none:empty has <strong class="font_bold c_primary-n2 uppercase">Content</strong></h2>
<div class="p-b_3 br_solid br_primary br_1 display_none:empty">any content including space will show the element</div>
Copy Code

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

6.4.2 Display For Touch Devices

Display has extra breakpoints :touch that can be used to create layouts that are more friendly for touch screen inputs. Touch devices are often smaller than desktop devices and input method is a finger that can't hover. This utility class can be used to create a layout that is more friendly for touch devices. Touch layouts are often needed to uncover UI that only appears on Hover.

Example

This element shows for both desktop and Touch devices
This element shows only for desktop devices
This element shows only for Touch devices
<div class="p_3 font_bold">This element shows for both <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-desktop"></i> desktop</strong> and <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-hand-pointer"></i>Touch </strong> devices</div>
<div class="p_3 font_bold display_none:touch">This element shows only for <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-desktop"></i> desktop</strong> devices</div>
<div class="p_3 font_bold block:touch display_none">This element shows only for <strong class="font_bold c_primary-n2 uppercase"><i class="fas fa-hand-pointer"></i>Touch </strong> devices</div>
Copy Code

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

6.4.3 Flex

Structure Objects quickly and change the order of the

Example s

Default styling

Auto 1
Shrink 2
Auto 3

.flex_row

the element is the a block- flex_row

Auto 1
Shrink 2
Auto 3

.flex_column

flex_column

Auto 1
Shrink 2
Auto 3

.flex_row-reverse

flex_column-reverse

Auto 1
Shrink 2
Auto 3

.flex_column-reverse

flex_row-reverse

Auto 1
Shrink 2
Auto 3
<div class="flex [modifier class] br_solid br_transparent bg_alert-3  text_center  p_3 bg_warning-3">
	<div class="bg_primary-5 text_center flex_auto p_3 br_solid br_1 m_2 br_black">Auto 1</div>
	<div class="bg_primary-5 text_center flex_shrink p_3 br_solid br_1 m_2 br_black">Shrink 2</div>
	<div class="bg_primary-5 text_center flex_auto p_3 br_solid br_1 m_2 br_black">Auto 3</div>
</div>
Copy Code

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

6.4.4 Vertical Align

Quickly alter the vertical alignment of the child. Cation the vertical only works on valid combinations.

  • the child is aligned to the Top

    .vertical-align_top

  • the child is aligned to the Middle

    .vertical-align_middle

  • the child is aligned to the Bottom

    .vertical-align_bottom

  • the child is aligned to the Baseline

    .vertical-align_baseline

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

6.4.5 Overflow

Control some basics of how content overflows.

Example s

Default styling

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

.overflow_hidden

hidden

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

.overflow_auto

auto

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

.overflow_visible

visible

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

.overflow_scroll

scroll

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

.overflow_clip

clip

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

.overflow_ellipsis

ellipsis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

.overflow_unset

unset

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.

	<div class="br_solid br_transparent bg_hightlight-3 max-w_40 [modifier class]">
		<p class="nowrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.</p>
	</div>
Copy Code

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

6.5 Float

Is Responsive: breakpoint modifiers
Easily Add Float to an object

Example s

Default styling

Position Absolute [modifier class]

.float_unset

float: unset

Position Absolute float_unset

.float_none

float: none

Position Absolute float_none

.float_left

float: left

Position Absolute float_left

.float_right

float: right

Position Absolute float_right
<div class=" br_solid br_transparent bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_primary-5 text_center [modifier class]">Position Absolute [modifier class]</div>
</div>
Copy Code

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

6.6 Grid

A great way to manipulating a repeating grid is to use the new CSS 3 grid layouts.

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

6.6.1 Grid Gap

Description: Grid Gap

classcss propertyvalue
.gap-x_0 grid-column-gap : 0
.gap-x_1 grid-column-gap : 1px
.gap-x_2 grid-column-gap : 0.25rem
.gap-x_3 grid-column-gap : 0.5rem
.gap-x_4 grid-column-gap : 1rem
.gap-x_5 grid-column-gap : 2rem
.gap-x_6 grid-column-gap : 4rem
classcss propertyvalue
.gap-y_0 grid-row-gap : 0
.gap-y_1 grid-row-gap : 1px
.gap-y_2 grid-row-gap : 0.25rem
.gap-y_3 grid-row-gap : 0.5rem
.gap-y_4 grid-row-gap : 1rem
.gap-y_5 grid-row-gap : 2rem
.gap-y_6 grid-row-gap : 4rem

Example s

Default styling

.template-x_20

grid layouts that are responsive and hold a certain size when able.

.template-x_25

grid layouts that are responsive and hold a certain size when able.

.template-x_30

grid layouts that are responsive and hold a certain size when able.

.template-x_35

grid layouts that are responsive and hold a certain size when able.

.template-x_40

grid layouts that are responsive and hold a certain size when able. 

<div></div>
Copy Code

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

6.7 Isolation

Altering the isolation of an object to create more complicated UI and Layouts when dealing with z-index.

classcss propertyvalue
.isolation_isolate isolation : isolate
.isolation_auto isolation : auto
.isolation_inherit isolation : inherit
.isolation_revert isolation : revert
.isolation_unset isolation : unset

Example 

<div></div>
Copy Code

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

6.8 Position Location

Is Responsive: breakpoint modifiers
Quickly alter the position type and location of an object with top, bottom, left, and right position mondifiers. All of these modifiers will follow the rules of the containers position type. All of the examples below are using absolute positions to have the greatest effect.

Example s

Default styling

Position Absolute [modifier class]

.t_1

modify top of an absolute positioned block

Position Absolute t_1

.t_5

modify top of an absolute positioned block

Position Absolute t_5

.b_1

modify bottom of an absolute positioned block

Position Absolute b_1

.b_5

modify bottom of an absolute positioned block

Position Absolute b_5

.r_5

modify left of an absolute positioned block

Position Absolute r_5

.l_5

modify right of an absolute positioned block

Position Absolute l_5
<div class=" br_solid br_transparent bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_primary-5 text_center absolute [modifier class]">Position Absolute [modifier class]</div>
</div>
Copy Code

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

6.9 Margin

Is Responsive: breakpoint modifiers
Margin classes are mobile first with postfix modifier for `:md`and `:lg` variations for responsive sizing. Margins that use the short codes of all margin, auto, x margins, and y margin are overriden by specific side margins.

Example s

Default styling

Object With Margins Inside Container

m_0

margin: 0

Object With Margins Inside Container

m_n5

margin: -2rem

Object With Margins Inside Container

m_n2

margin: -0.25rem

Object With Margins Inside Container

m_4

margin: 1rem

Object With Margins Inside Container

m-l_n5

margin-left: -2rem

Object With Margins Inside Container

m-l_1

margin-left: 1px

Object With Margins Inside Container

m-l_2

margin-left: 0.25rem

Object With Margins Inside Container

m-l_3

margin-left: 0.5rem

Object With Margins Inside Container

m-x_auto

margin-left, margin-right: auto

Object With Margins Inside Container

m-y_3

margin-top, margin-bottom: 0.5rem

Object With Margins Inside Container
<div class="bg_warning-3 d-block br_1 br_solid">
	<div class="[modifier class] p_2 bg_primary text_center c_white cell auto opacity_5 d-block max-w_30">Object  With Margins Inside Container</div>
</div>
Copy Code

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

6.10 Max Width

Control the max width by 10% increments or by readable which is 65em

Example s

Default styling

[modifier class] Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.

.max-w_10.lh_4

width size for a column that would match up to the smallest breakpoint.

max-w_10 lh_4 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.

.max-w_20.font_n1.lh_4

comfortable reading range for font_n1 text.

max-w_20 font_n1 lh_4 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.

.max-w_50.font_0.lh_3

comfortable reading range for font_0 text

max-w_50 font_0 lh_3 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.

.max-w_60.font_1.lh_2

comfortable reading range for font_1 text

max-w_60 font_1 lh_2 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.

.max-w_80.lh_4

large screen format of 1280px #198dae

max-w_80 lh_4 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec. 
<div class=" br_solid br_transparent bg_alert-3 p_5">
	<div class="bg_white text-left [modifier class]">
		<strong>[modifier class]</strong> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus
		ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
		imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed
		lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem,
		at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
		cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue
		elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.
	</div>
</div>
Copy Code

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

6.11 Padding

Is Responsive: breakpoint modifiers
Quickly alter the padding of an object.
classresponsive modifierscss propertyvalue
.p_0.p_0:md, .p_0:lg padding : 0
.p_1.p_1:md, .p_1:lg padding : 1px
.p_2.p_2:md, .p_2:lg padding : 0.25rem
.p_3.p_3:md, .p_3:lg padding : 0.5rem
.p_4.p_4:md, .p_4:lg padding : 1rem
.p_5.p_5:md, .p_5:lg padding : 2rem
.p_6.p_6:md, .p_6:lg padding : 4rem

Example s

Default styling

Content With Padding

.p_0

padding: 0

Content With Padding

.p_1

padding: 1px

Content With Padding

.p_2

padding: 0.25rem

Content With Padding

.p_3

padding: 0.5rem

Content With Padding

.p_4

padding: 1rem

Content With Padding

.p_5

padding: 2rem

Content With Padding

.p-x_5

left and right paddings set to 2x of global padding

Content With Padding

.p-y_5

top and bottom paddings set to 2x of global padding

Content With Padding

.p-t_4

Top padding set to global padding

Content With Padding

.p-r_4

Right padding set to global padding

Content With Padding

.p-l_4

Left padding set to global padding

Content With Padding

.p-b_4

Bottom padding set to global padding

Content With Padding
<div class="[modifier class] br_solid br_transparent bg_alert-3  text_center">
	<div class="bg_primary-5 text_center">Content With Padding</div>
</div>
Copy Code

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

6.12 Position Type

Is Responsive: breakpoint modifiers
Quickly alter the position type and location of an object with 'absolute' and 'top'

Example s

Default styling

Position [modifier class]

.initial

position: initial

Position initial

.inherit

position: inherit

Position inherit

.relative

position: relative

Position relative

.absolute

position: absolute

Position absolute

.fixed

position: fixed

Position fixed

.sticky

position: sticky

Position sticky

.unset

position: unset

Position unset
<div class="br_solid br_transparent bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_primary-5 text_center [modifier class]">Position [modifier class]</div>
</div>
Copy Code

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

6.13 Z Index

Alter the Z Index of objects to help deal with objects that are out of normal z-index flow.

classcss propertyvalue
.z_0 z-index : -1
.z_1 z-index : 1
.z_2 z-index : 100
.z_3 z-index : 1000
.z_4 z-index : 5000
.z_5 z-index : 9999

Example s

Default styling

z-index of 1000
[modifier class]

.z_0

z-index: -1

z-index of 1000
z_0

.z_1

z-index: 1

z-index of 1000
z_1

.z_3

z-index: 1000

z-index of 1000
z_3

.z_5

z-index: 9999

z-index of 1000
z_5
<div class="bg_alert-3 block br_solid br_transparent relative text_center" style=" height: 15rem; width: 100%;">
	<div class="absolute bg_black-5 c_white inline-block l_0 m_4 t_1 text_center w_70 z_3" style=" height: 13rem;">z-index of 1000</div>
	<div class="absolute bg_primary c_white inline-block m_5 r_0 t_1 text_center w_70 [modifier class]" style=" height: 11rem;">[modifier class]</div>
</div>
Copy Code

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

6.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

.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

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

6.14.1 UC: Height LH

Classes Effect
.h_0lh height: 1em
.h_1lh height: 1.25em
.h_2lh height: 1.45em
.h_3lh height: 1.65em
.h_4lh height: 1.75em
.h_5lh height: 2em

Example

font_1 text with h_0lh smaller text
font_1 text with h_1lh smaller text
font_1 text with h_2lh smaller text
font_1 text with h_3lh smaller text
font_1 text with h_4lh smaller text
font_1 text with h_5lh smaller text
font_2 text with h_0lh smaller text
font_2 text with h_1lh smaller text
font_2 text with h_2lh smaller text
font_2 text with h_3lh smaller text
font_2 text with h_4lh smaller text
font_2 text with h_5lh smaller text
font_3 text with h_0lh smaller text
font_3 text with h_1lh smaller text
font_3 text with h_2lh smaller text
font_3 text with h_3lh smaller text
font_3 text with h_4lh smaller text
font_3 text with h_5lh smaller text
<div class="flex flex_column font_1">
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_0lh lh_0">font_1 text with h_0lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_1lh lh_1">font_1 text with h_1lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_2lh lh_2">font_1 text with h_2lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_3lh lh_3">font_1 text with h_3lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_4lh lh_4">font_1 text with h_4lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_5lh lh_5">font_1 text with h_5lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
</div>
<div class="flex flex_column font_2">
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_0lh lh_0">font_2 text with h_0lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_1lh lh_1">font_2 text with h_1lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_2lh lh_2">font_2 text with h_2lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_3lh lh_3">font_2 text with h_3lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_4lh lh_4">font_2 text with h_4lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_5lh lh_5">font_2 text with h_5lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
</div>
<div class="flex flex_column font_3">
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_0lh lh_0">font_3 text with h_0lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_1lh lh_1">font_3 text with h_1lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_2lh lh_2">font_3 text with h_2lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_3lh lh_3">font_3 text with h_3lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_4lh lh_4">font_3 text with h_4lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
	<div class="flex_auto br_solid br_white-8 br_1 bg_primary-4 p-x_3 h_5lh lh_5">font_3 text with h_5lh <span class="font-size_down vertical-alighn-middle">smaller text</span></div>
</div>
Copy Code

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

6.14.2 Min Height

Is Responsive: breakpoint modifiers
Min heights can be very useful in interactions and keeping a consistent dimension feel without conflicts of overflow.
ClassesEffect
.min-h_automin-height: auto
.min-h_0min-height: 0vh
.min-h_10min-height: 10vh
.min-h_20min-height: 20vh
.min-h_30min-height: 30vh
.min-h_40min-height: 40vh
.min-h_50min-height: 50vh
.min-h_60min-height: 60vh
.min-h_70min-height: 70vh
.min-h_80min-height: 80vh
.min-h_90min-height: 90vh
.min-h_100min-height: 100vh
.min-h_unsetmin-height: unset

Example

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

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

6.15 Width

Control some basics of the design with max-width and width.

Control the width percents.

[modifier class]
 
w_auto
 
w_0
 
w_5
 
w_10
 
w_15
 
w_20
 
w_25
 
w_30
 
w_35
 
w_40
 
w_45
 
w_50
 
w_55
 
w_60
 
w_65
 
w_70
 
w_75
 
w_80
 
w_85
 
w_90
 
w_95
 
w_100
 
w_1-third
 
w_2-thirds