Stack
Definition
A Stack is container to help the layout of other components. It is inherently a block element, and uses margin to separate elements. Using margin means that margins will collapse between two adjacent child elements. This is useful, for example, for a heading with inherent margin-bottom and any other element following it.
Stack has utility classes to create all the spacings between child elements
in $spaces
, the Bootstrap spacing list.
Stack has a variation called Divider (.stack-divider
) which
adds a dividing line between the child elements. Divider is flexible in its
color, width, and height. Divider's default color is primary
,
which, with the presence of an archive color in neutral theme, will be the
archive color.
Description
Use the Stack to evenly space out child elements.
Examples
Stack
This example is made of nested Stacks. The parent Stack has a Divider. The first nested Stack has a smaller spacing than the second nested Stack.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Invidiosum nomen est, infame, suspectum. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Addidisti ad extremum etiam indoctum fuisse. Scrupulum, inquam, abeunti;
Tum ille timide vel potius verecunde: Facio, inquit. Quid est enim aliud esse versutum?
Duo Reges: constructio interrete. Utram tandem linguam nescio? Nihil opus est exemplis hoc facere longius. Est, ut dicis, inquit; An haec ab eo non dicuntur? Est, ut dicis, inquam. Quid, quod res alia tota est? Hoc non est positum in nostra actione.
<div class="stack stack-divider col-10 offset-1 bg-white p-3">
<section>
<h3>About</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Invidiosum
nomen est, infame, suspectum. Ergo illi intellegunt quid Epicurus
dicat, ego non intellego? Addidisti ad extremum etiam indoctum
fuisse. Scrupulum, inquam, abeunti;
</p>
<p>
Tum ille timide vel potius verecunde: Facio, inquit. Quid est enim
aliud esse versutum?
</p>
<p>
Duo Reges: constructio interrete. Utram tandem linguam nescio? Nihil
opus est exemplis hoc facere longius. <a
href="http://loripsum.net/"
target="_blank">Est, ut dicis, inquit;</a
> An haec ab eo non dicuntur? Est, ut dicis, inquam. Quid, quod res alia
tota est? Hoc non est positum in nostra actione.
</p>
</section>
<section class="stack stack-2">
<ProfileWithDescription />
<ProfileWithDescription />
<ProfileWithDescription />
</section>
<section class="stack stack-5">
<ProfileWithDescription />
<ProfileWithDescription />
<ProfileWithDescription />
</section>
</div>
Eyebrow
To create an eyebrow, set the --divider-line-width
CSS Custom
Property.
About National Neighborhood Data Archive (NaNDA)
The National Neighborhood Data Archive (NaNDA) is a publicly available data archive containing measures of the physical, economic, demographic, and social environment at multiple levels of spatial scale (eg, census tract, ZIP code tabulation area, county). Each NaNDA dataset covers all or most of the entire nation (including both rural and urban areas) and represents a set of measures on a single topic of interest, including socioeconomic disadvantage, healthcare, housing, partisanship, and public transit, with temporal coverage dating back to 2000.
<div class="well splash-about stack stack-divider">
<h2>About National Neighborhood Data Archive (NaNDA)</h2>
<p>
The National Neighborhood Data Archive (NaNDA) is a publicly available data
archive containing measures of the physical, economic, demographic, and
social environment at multiple levels of spatial scale (eg, census tract,
ZIP code tabulation area, county). Each NaNDA dataset covers all or most of
the entire nation (including both rural and urban areas) and represents a
set of measures on a single topic of interest, including socioeconomic
disadvantage, healthcare, housing, partisanship, and public transit, with
temporal coverage dating back to 2000.
</p>
</div>
// _splash.scss
.splash-about {
--divider-line-width: 5rem;
--stack-gap: 2rem;
}
Variables
CSS Custom Properties
--stack-gap
--divider-color
--divider-line-height
--divider-line-width