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