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 5828

7 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 8475

7.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_4x3 aspect-ratio : 4 / 3
.aspect_3x4 aspect-ratio : 3 / 4
.aspect_3x2 aspect-ratio : 3 / 2
.aspect_2x3 aspect-ratio : 2 / 3
.aspect_16x9 aspect-ratio : 16 / 9
.aspect_21x9 aspect-ratio : 21 / 9
.aspect_2x1 aspect-ratio : 2 / 1
.aspect_3x1 aspect-ratio : 3 / 1
.aspect_4x1 aspect-ratio : 4 / 1
.aspect_5x1 aspect-ratio : 5 / 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 5734

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

7.3 Content Query

Description: A mass improvement on how to design components with alteration based on the container dimensions rather than the page width. In attempts to reduce the increase in size of the style sheet container queries are only reserved to responsive class properties.

Example

Default styling

<div class="warpper\@container">
</div>
Copy Code

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

7.3.1 Content Query Reactive Styles

Description:

Style Short Name CSS Property
display 'block,flex...' 'display'
position 'absolute,relative...' 'position'
grid '.columns','.rows' 'grid-column-template' ,'grid-row-template'
flex-size '.flex' 'flex'
flex-direction '.flex' 'flex-direction'
gap '.gap' 'gap'
justify '.justify' 'justify-content' ,'justify-items','justify-self'
align '.content','.items','.self' 'align-content' ,'align-items','align-self'
margin '.m' 'margin'
padding '.p' 'padding'
font-size '.font' 'font-size'
border-style '.br' 'border-style'

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

7.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
.table-row-group.table-row-group:md, .table-row-group:lg display : table-row-group
.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 5845

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

Default styling

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 5867

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

Default styling

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 6193

7.4.3 Flex

Structure Objects quickly and change the order of the

Example s

.flex_row

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 6180

7.4.4 Vertical Align

Quickly alter the vertical alignment of the child. caution 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 8394

7.4.5 Overflow

Control some basics of how content overflows.

Example s

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

7.5 Float

Is Responsive: breakpoint modifiers
Easily Add Float to an object

Example s

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

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

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

1

gap space modifier

gap_1

1
2
3
4
5
6
7
8
9

gap-y_1

1
2
3
4
5
6
7
8
9

gap-x_1

1
2
3
4
5
6
7
8
9

2

gap space modifier

gap_2

1
2
3
4
5
6
7
8
9

gap-y_2

1
2
3
4
5
6
7
8
9

gap-x_2

1
2
3
4
5
6
7
8
9

3

gap space modifier

gap_3

1
2
3
4
5
6
7
8
9

gap-y_3

1
2
3
4
5
6
7
8
9

gap-x_3

1
2
3
4
5
6
7
8
9

4

gap space modifier

gap_4

1
2
3
4
5
6
7
8
9

gap-y_4

1
2
3
4
5
6
7
8
9

gap-x_4

1
2
3
4
5
6
7
8
9

5

gap space modifier

gap_5

1
2
3
4
5
6
7
8
9

gap-y_5

1
2
3
4
5
6
7
8
9

gap-x_5

1
2
3
4
5
6
7
8
9

6

gap space modifier

gap_6

1
2
3
4
5
6
7
8
9

gap-y_6

1
2
3
4
5
6
7
8
9

gap-x_6

1
2
3
4
5
6
7
8
9 
<div class="grid columns-max_15 gap_3"><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap_[modifier class]</h2><div class="gap_[modifier class] grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap-y_[modifier class]</h2><div class="gap-y_[modifier class] grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div><div class="flex flex_column justify_start"><h2 class="flex_shrink">gap-x_[modifier class]</h2><div class="gap-x_[modifier class] grid columns_3 rows_3 flex_auto"><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">1 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">2 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">3 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">4 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">5 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">6 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">7 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">8 </div><div class="bg_acc c_white font_4 font_bold grid items_center justify_around p_3 br_solid br_black-3 br_1">9 </div></div></div></div>
Copy Code

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

7.6.2.1 Grid: Column and Row Start/End

This group of utility classes allows you to control the starting and ending positions of grid columns and rows.

classcss propertyvalue
.col-start_start grid-column-start : start
.col-start_1 grid-column-start : 1
.col-start_2 grid-column-start : 2
.col-start_3 grid-column-start : 3
.col-start_4 grid-column-start : 4
.col-start_5 grid-column-start : 5
.col-start_6 grid-column-start : 6
.col-start_7 grid-column-start : 7
.col-start_n1 grid-column-start : -1
.col-start_n2 grid-column-start : -2
.col-start_n3 grid-column-start : -3
.col-start_n4 grid-column-start : -4
.col-start_n5 grid-column-start : -5
.col-start_n6 grid-column-start : -6
.col-start_n7 grid-column-start : -7
.col-start_end grid-column-start : end
classcss propertyvalue
.col-end_start grid-column-end : start
.col-end_1 grid-column-end : 1
.col-end_2 grid-column-end : 2
.col-end_3 grid-column-end : 3
.col-end_4 grid-column-end : 4
.col-end_5 grid-column-end : 5
.col-end_6 grid-column-end : 6
.col-end_7 grid-column-end : 7
.col-end_n1 grid-column-end : -1
.col-end_n2 grid-column-end : -2
.col-end_n3 grid-column-end : -3
.col-end_n4 grid-column-end : -4
.col-end_n5 grid-column-end : -5
.col-end_n6 grid-column-end : -6
.col-end_n7 grid-column-end : -7
.col-end_end grid-column-end : end
classcss propertyvalue
.row-start_start grid-row-start : start
.row-start_1 grid-row-start : 1
.row-start_2 grid-row-start : 2
.row-start_3 grid-row-start : 3
.row-start_4 grid-row-start : 4
.row-start_5 grid-row-start : 5
.row-start_6 grid-row-start : 6
.row-start_7 grid-row-start : 7
.row-start_n1 grid-row-start : -1
.row-start_n2 grid-row-start : -2
.row-start_n3 grid-row-start : -3
.row-start_n4 grid-row-start : -4
.row-start_n5 grid-row-start : -5
.row-start_n6 grid-row-start : -6
.row-start_n7 grid-row-start : -7
.row-start_end grid-row-start : end
classcss propertyvalue
.row-end_start grid-row-end : start
.row-end_1 grid-row-end : 1
.row-end_2 grid-row-end : 2
.row-end_3 grid-row-end : 3
.row-end_4 grid-row-end : 4
.row-end_5 grid-row-end : 5
.row-end_6 grid-row-end : 6
.row-end_7 grid-row-end : 7
.row-end_n1 grid-row-end : -1
.row-end_n2 grid-row-end : -2
.row-end_n3 grid-row-end : -3
.row-end_n4 grid-row-end : -4
.row-end_n5 grid-row-end : -5
.row-end_n6 grid-row-end : -6
.row-end_n7 grid-row-end : -7
.row-end_end grid-row-end : end

Modifiers:

Markup Examples:

NOTE:
These utility classes allow you to specify the starting and ending positions of grid columns and rows. Use the corresponding modifier class (e.g., col-start_1, col-end_2, row-start_3, row-end_4) to apply the desired positioning to grid elements.

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

7.6.3.1 Equal-width Columns

Description: This group of utility classes sets the grid-template-columns property to create a responsive grid layout with equal-width columns.

Example s

.columns_1

Creates a grid layout with a single column that takes up the entire available space.

1
2
3
4
5
6

.columns_2

Creates a grid layout with two equal-width columns.

1
2
3
4
5
6

.columns_3

Creates a grid layout with three equal-width columns.

1
2
3
4
5
6

.columns_4

Creates a grid layout with four equal-width columns.

1
2
3
4
5
6

.columns_5

Creates a grid layout with five equal-width columns.

1
2
3
4
5
6

.columns_6

Creates a grid layout with six equal-width columns.

1
2
3
4
5
6
NOTE:
These utility classes are a basic method for creating grid layouts with equal-width columns. However, for more advanced column manipulation techniques, please refer to the documentation below. 
<div class="[modifier class] gap_3 grid">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
</div>
Copy Code

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

7.6.3.1.1 Advanced Columns

Description: This group of utility classes sets the grid-template-columns property to create a responsive grid layout with custom-width columns using CSS variables. In the below example the --col-2 variable is set to 3rem rather thenthe default fr.

classcss propertyvalue
.columns_1 grid-template-columns : [start] var(--col-1, 1fr) [end]
.columns_2 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) [end]
.columns_3 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end]
.columns_4 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end]
.columns_5 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end]
.columns_6 grid-template-columns : [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end]

Example s

.columns_1

repeat on 1 the --col-2 is never used

1
2
3
4
5
6

.columns_2

repeat on 2 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_3

repeat on 3 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_4

repeat on 4 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_5

repeat on 5 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6

.columns_6

repeat on 6 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide

1
2
3
4
5
6
NOTE:
These utility classes allow you to easily create grid layouts with columns of customized widths. Simply define the desired width for each row using CSS variables (--col-1, --col-2, etc.). By default, the width is set to 1fr for equal-width columns. However, you can override these values as needed by including inline styles, as shown in this example, or by using in-page style tags. To make responsive adjustments to the CSS variables, you can use in-page style tags to define responsive media queries that modify the values of the CSS variables. For a reference, you can look at the Advanced Rows Advanced example, which uses a style tag to achieve this. 
<div id="ColumnSample" class="[modifier class] gap_3 grid" style="">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
</div>
<style>
#ColumnSample{ --col-2: 3rem; }
@media only screen and (min-width : 768px) { #ColumnSample{ --col-2: 30rem; }}
</style>
Copy Code

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

7.6.3.2 Static-Width Columns

This utility class sets the grid-template-columns property to create a responsive grid layout. It uses the repeat function with the auto-fill keyword and a static max width based in multiples of 16px. 15 stands for 15 rem units wich calculates to 15 x 16px or 240

Example s

.columns-max_15

Sets the columns to have a maximum static-width of 15rem (240px) ~ 50% on mobile.

1
2
3
4
5
6
7
8

.columns-max_20

Sets the columns to have a maximum static-width of 20rem (320px).

1
2
3
4
5
6
7
8

.columns-max_25

Sets the columns to have a maximum static-width of 25rem (400px).

1
2
3
4
5
6
7
8

.columns-max_30

Sets the columns to have a maximum static-width of 30rem (480px).

1
2
3
4
5
6
7
8

.columns-max_35

Sets the columns to have a maximum static-width of 35rem (560px).

1
2
3
4
5
6
7
8
NOTE:
the class `.justify_around` is a great addition to this pattern because it allows the gap bettween grids to flex allowing for the space to be filled. 
<div class="[modifier class] gap_3 grid">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">7</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">8</div>
</div>
Copy Code

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

7.6.4.1 Equal-Height Rows

Description: This group of utility classes sets the grid-template-rows property to create a responsive grid layout with equal-height rows. Most of the time the rows should be handled automatically unless you are going to use the advanced features referenced in Advanced Rows

classcss propertyvalue
.rows_1 grid-template-rows : [start] var(--row-1, 1fr) [end]
.rows_2 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) [end]
.rows_3 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end]
.rows_4 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end]
.rows_5 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end]
.rows_6 grid-template-rows : [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end]

NOTE:
These utility classes are a basic method for creating grid layouts with equal-height rows. However, for more advanced column manipulation techniques, please refer to the documentation below.

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

7.6.4.1.1 Advanced Rows

Description: This group of utility classes sets the grid-template-Rows property to create a responsive grid layout with custom-height Rows using CSS variables. In the below example the --row-2 variable is set to 10rem rather thenthe default fr.

Example s

.rows_1

repeat on 1 the --row-2 is never used because it is looping just over the first row.

1
2
3
4
5
6

.rows_2

repeat on 2 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_3

repeat on 3 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_4

repeat on 4 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_5

repeat on 5 and the second row is stet to be 10rem

1
2
3
4
5
6

.rows_6

repeat on 6 and the second row is stet to be 10rem

1
2
3
4
5
6
NOTE:
These utility classes allow you to easily create grid layouts with rows of customized heights. Simply define the desired height for each column using CSS variables (--row-1, --row-2, etc.). By default, the height is set to 1fr for equal-height rows. However, you can override these values as needed by including inline styles, as shown in this example, or by using in-page style tags. To make responsive adjustments to the CSS variables, you can use in-page style tags to define responsive media queries that modify the values of the CSS variables. For a reference, you can look at the `Advanced Columns Advanced` example, which uses a style tag to achieve this. 
<div class="[modifier class] gap_3 grid" style="--row-2: 10rem">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
</div>
Copy Code

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

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

Default styling

<div></div>
Copy Code

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

7.8 Location Position

Directional Position

The directional positioning classes are used to specify the positioning of an element in a specific direction. The directional positioning classes are most useful when combined with the "absolute" positioning mode, but it can also be used with other positioning modes. It allows you to specify the positioning of an element in a specific direction, such as inset, top, right, bottom, or left.

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

7.8.1 Inset

Is Responsive: breakpoint modifiers
The "inset" CSS property allows you to specify the positioning of an element's four edges within its containing element. It provides a convenient shorthand for defining the values of "top," "right," "bottom," and "left" properties simultaneously. By using the "inset" property, you can easily control the placement of an element without the need to specify each edge individually.

Example s

.inset_auto

modify inset of an absolute positioned block

Position Absolute inset_auto

.inset_0

modify inset of an absolute positioned block

Position Absolute inset_0

.inset_3

modify inset of an absolute positioned block

Position Absolute inset_3

.inset_5

modify inset of an absolute positioned block

Position Absolute inset_5

.inset_n3

modify inset of an absolute positioned block

Position Absolute inset_n3

.inset_n5

modify inset of an absolute positioned block

Position Absolute inset_n5
NOTE:
The ".inset_x" CSS class has lower specificity in the cascade, enabling a corresponding directional class to override its positioning at that specific responsive layer. 
<div class=" br_solid br_black br_1 bg_accent-3 relative p_5" style="height:200px;">
	<div class="bg_white-5 m_auto text_center absolute [modifier class] opacity_5 br_solid br_black-5 br_1">Position Absolute [modifier class]</div>
</div>
Copy Code

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

7.8.2 Directional Position

Is Responsive: breakpoint modifiers
Quickly alter the position type and location of an object with top, bottom, left, and right position modifiers. 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

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

7.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 override by specific side margins.

Example s

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 9219

7.10 Max Width

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

Example s

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

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

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

7.12 Position Type

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

Example s

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

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

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

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

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

Default styling

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 9880

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

Default styling

.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 items_start">
<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 8694

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

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

7.15.1 Custom Max Width

Add "max-w_custom" class to the component that you want to set a custom width for. Then the custom width value can be passed to that component from either the parent component or itself using style="--max-w_custom:rem value"

Width value passed from parent component
12rem
Width value set inline
24rem