Stack

A vertical flow utility used to create space between components.

Contextual (flow) spacing

Manage the spacing between the children of an element by adding .qw-flow-content to the parent element. This will add a gap between each of the child elements of 16px.

Stack item

HTML

                
<div class="qw-flow-content">
    <div class="border p-1">Stack item</div>
    <div class="border p-1">Stack item</div>
    <div class="border p-1">Stack item</div>
</div>
                
            

Alert Title

Remember that the composition of the content is what determines the spacing. This includes elements that are hidden via css or their default properties, like <input type=hidden>.

Variants

In addition to the default stack spacing (16px), variants are available using our spacing tokens to adjust the gap between the elements, from .qw-flow-content-1 through .qw-flow-content-5.

.qw-flow-content_condensed and .qw-flow-content_extended have been deprecated, and will be removed in a future version.

`.qw-flow-content-1`

Flow content

HTML

                    
<div class="qw-flow-content-1">
    <div class="border p-1">Flow content</div>
    <div class="border p-1">Flow content</div>
    <div class="border p-1">Flow content</div>
</div>
                
                

`.qw-flow-content-5`