title | sort_title | path | status | status_issue | source | bundle |
---|---|---|---|---|---|---|
Marketing Margin |
Margin Marketing |
utilities/marketing-margin |
Stable |
marketing-utilities |
Marketing margin utilities extend core margin utilities across the y-axis only. The marketing scale starts from spacer 7 up to 12, and steps first by 8px
for spacer 7 and continues in increments of 16px
for spacer 8 to 12.
Use marketing margin utilities to apply margin to top, bottom, or both y-axis of an element. These utilities can change or override default margins, and can be used with a spacing scale of 7-12.
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue mt-7">.mt-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue mb-7">.mb-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue my-7">.my-7</div>
</div>
All marketing margin utilities can be adjusted per breakpoint using the following formula: m[y-direction]-[breakpoint]-[spacer]
. Each responsive style is applied to the specified breakpoint and up.
<div class="d-inline-block margin-orange">
<div class="my-sm-7 mb-lg-9 d-inline-block block-blue">
.my-sm-7 .mb-lg-9
</div>
</div>