Use Negative Margins to Create Interesting Page Layouts
By default, WVU Design System components are “stacked” visually on top of each
other within a page layout, and the content within each component is surrounded
by some default padding. This doesn’t mean the content within each component
must stay trapped inside. You can use Bootstrap’s negative margin utility classes to have content “break through” its container to blend components together
and create interesting page layouts. Below is an example where you may want to
do this.
Hero + Page Collection - Colored Boxes
Sometimes it looks nice to have a Hero component stacked on a Page Collection - Colored Boxes component, but with the boxes breaking the grid up into the hero. It looks like this:
In order to achieve this layout, use the Super Template to add a Hero component and
a Page Collection - Colored Boxes component, then use the style editor to tweak
the layout. In the Page Collection - Colored Boxes component, change the “Utility
classes” to container py-0 and the “Utility classes for row” to mt-n5 mx-n4.