Box
Boxes apply spacing, a border, and rounded corners to content areas.
Class | Type | |
---|---|---|
box
|
Box | A class representing a box |
Box element
<div class="box">Box element</div>
Multiple Boxes
You stack multiple boxes on each other by using the boxes-wrapper
class. Middle boxes will appear without a border radius.
Top Box
Middle Box
Middle Box
Bottom Box
<div class="boxes-wrapper">
<div class="box u-flex u-gap-16 u-cross-center">Top Box</div>
<div class="box u-flex u-gap-16 u-cross-center">Middle Box</div>
<div class="box u-flex u-gap-16 u-cross-center">Middle Box</div>
<div class="box u-flex u-gap-16 u-cross-center">Bottom Box</div>
</div>