x
1
2
3
4
5
6
<div style="--pc-box-border-color: var(--p-color-border-caution);--pc-box-border-style: solid;--pc-box-border-width: var(--p-border-width-2);--pc-box-padding-block-end-xs: var(--p-space-4);--pc-box-padding-block-start-xs: var(--p-space-4);--pc-box-padding-inline-end-xs: var(--p-space-4);--pc-box-padding-inline-start-xs: var(--p-space-4)" class="Polaris-Box"> <p>Simple padding</p></div><div style="--pc-box-border-color: var(--p-color-border-caution);--pc-box-border-style: solid;--pc-box-border-width: var(--p-border-width-2);--pc-box-padding-block-end-xs: var(--p-space-1);--pc-box-padding-block-end-sm: var(--p-space-3);--pc-box-padding-block-end-md: var(--p-space-5);--pc-box-padding-block-end-lg: var(--p-space-8);--pc-box-padding-block-end-xl: var(--p-space-16);--pc-box-padding-block-start-xs: var(--p-space-1);--pc-box-padding-block-start-sm: var(--p-space-3);--pc-box-padding-block-start-md: var(--p-space-5);--pc-box-padding-block-start-lg: var(--p-space-8);--pc-box-padding-block-start-xl: var(--p-space-16);--pc-box-padding-inline-end-xs: var(--p-space-1);--pc-box-padding-inline-end-sm: var(--p-space-3);--pc-box-padding-inline-end-md: var(--p-space-5);--pc-box-padding-inline-end-lg: var(--p-space-8);--pc-box-padding-inline-end-xl: var(--p-space-16);--pc-box-padding-inline-start-xs: var(--p-space-1);--pc-box-padding-inline-start-sm: var(--p-space-3);--pc-box-padding-inline-start-md: var(--p-space-5);--pc-box-padding-inline-start-lg: var(--p-space-8);--pc-box-padding-inline-start-xl: var(--p-space-16)" class="Polaris-Box"> <p>Responsive padding</p></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= polaris_box(border_color: "border-caution", border_width: "2", padding: "4") do %> <p>Simple padding</p><% end %><%= polaris_box( border_color: "border-caution", border_width: "2", padding: { xs: "1", sm: "3", md: "5", lg: "8", xl: "16" }) do %> <p>Responsive padding</p><% end %>No notes provided.
No params configured.