Box
A box is a simple container used to encapsulate content and provide a background, border, and corner radius.
Base
A .qw-box is a standalone container of content. Content can be placed directly within it (It does not require child container elements like header, body, or footer). By default, it does not have padding or margins. These should be added via utility classes or sub-types.
<div class="qw-box">
This is a basic box
</div>
Box body
Nesting an element with the .qw-box_body inside the box will apply equal padding to each side of the box. Use utility classes to remove padding for edge-to-edge content like tables and lists.
This is a box with the default body style.
<div class="qw-box">
<div class="qw-box_body">Box contents</div>
</div>
Box header and footer
Optional header (.qw-box_header) and footer (.qw-box_footer) elements can be nested inside the box to create a more complex layout.
Box content
<div class="qw-box">
<div class="qw-box_header">Box header</div>
<div class="qw-box_body">Box contents</div>
<div class="qw-box_footer">Box footer</div>
</div>
Variants
Condensed box
Add .qw-box_condensed to the .qw-box to create a condensed variant of the box component which reduces the amount of padding applied to the box's header, content, and footer.
This is a box with a header, some content, and a footer.
<div class="qw-box">
<div class="qw-box_header">Box header</div>
<div class="qw-box_body">Box contents</div>
<div class="qw-box_footer">Box footer</div>
</div>