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

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