Skip to Main Content
Mosaic Logo
Mosaic Logo
  • Home
  • Browse components
  • Use in projects
    • Colors
    • Icons
    • Grid
    • Links
    • Typography
    • Spacing Utilities
    • SVG
    • Accordions
    • Alerts
    • Badges
    • Buttons
    • Copy to clipboard
    • Cards
    • Featured Container
    • Filter Bar
    • Lists
    • Loading Spinners
    • Modals
    • Pagination
    • Progress Bars
    • Progress Indicator
    • Site Banner
    • Tables
    • Tabs
    • Toast
    • Toggle Switches
    • Well
    • Wizard
    • Events
    • File Browser
    • File Upload
    • Footer
    • Header
    • Hero
    • Post Item
    • Profile
    • Sidebar Navigation
    • Splash
    • Stack
    • Form Instructions
    • Form Layout
    • Form Validation
    • Form Output
    • Checkboxes
    • Labels
    • Radio Buttons
    • Search Input
    • Select
    • Text Inputs

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.

Placeholder image
Joseph Kahne
Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for Education Policy and Politics at the University of California, Riverside and Chair of the MacArthur Foundation Research Network on Youth and Participatory Politics. Joe's current research draws on a national longitudinal survey of youth (conducted in partnership with Cathy Cohen at the University of Chicago) to examine ways participation with digital media is shaping youth civic and political engagement. He also studies ways that educational efforts can improve the quantity, quality, and equality of youth civic and political engagement. A former high school social studies teacher, Joe is Co-Principal Investigator (with Erica Hodgin) of Educating for Democracy in the Digital Age—A district-wide effort in Oakland California to provide all youth with rich and equitable opportunities to work for change in their communities. He sits on the steering committee of the National Campaign for the Civic Mission of Schools, on the iCivics Research Advisory Board, on the advisory board of CIRCLE (the Center for Information and Research on Civic Learning), and he is a Senior Advisor to the Spencer Foundation's New Civics Initiative.
Placeholder image
Joseph Kahne
Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for Education Policy and Politics at the University of California, Riverside and Chair of the MacArthur Foundation Research Network on Youth and Participatory Politics. Joe's current research draws on a national longitudinal survey of youth (conducted in partnership with Cathy Cohen at the University of Chicago) to examine ways participation with digital media is shaping youth civic and political engagement. He also studies ways that educational efforts can improve the quantity, quality, and equality of youth civic and political engagement. A former high school social studies teacher, Joe is Co-Principal Investigator (with Erica Hodgin) of Educating for Democracy in the Digital Age—A district-wide effort in Oakland California to provide all youth with rich and equitable opportunities to work for change in their communities. He sits on the steering committee of the National Campaign for the Civic Mission of Schools, on the iCivics Research Advisory Board, on the advisory board of CIRCLE (the Center for Information and Research on Civic Learning), and he is a Senior Advisor to the Spencer Foundation's New Civics Initiative.
Placeholder image
Joseph Kahne
Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for Education Policy and Politics at the University of California, Riverside and Chair of the MacArthur Foundation Research Network on Youth and Participatory Politics. Joe's current research draws on a national longitudinal survey of youth (conducted in partnership with Cathy Cohen at the University of Chicago) to examine ways participation with digital media is shaping youth civic and political engagement. He also studies ways that educational efforts can improve the quantity, quality, and equality of youth civic and political engagement. A former high school social studies teacher, Joe is Co-Principal Investigator (with Erica Hodgin) of Educating for Democracy in the Digital Age—A district-wide effort in Oakland California to provide all youth with rich and equitable opportunities to work for change in their communities. He sits on the steering committee of the National Campaign for the Civic Mission of Schools, on the iCivics Research Advisory Board, on the advisory board of CIRCLE (the Center for Information and Research on Civic Learning), and he is a Senior Advisor to the Spencer Foundation's New Civics Initiative.
Placeholder image
Joseph Kahne
Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for Education Policy and Politics at the University of California, Riverside and Chair of the MacArthur Foundation Research Network on Youth and Participatory Politics. Joe's current research draws on a national longitudinal survey of youth (conducted in partnership with Cathy Cohen at the University of Chicago) to examine ways participation with digital media is shaping youth civic and political engagement. He also studies ways that educational efforts can improve the quantity, quality, and equality of youth civic and political engagement. A former high school social studies teacher, Joe is Co-Principal Investigator (with Erica Hodgin) of Educating for Democracy in the Digital Age—A district-wide effort in Oakland California to provide all youth with rich and equitable opportunities to work for change in their communities. He sits on the steering committee of the National Campaign for the Civic Mission of Schools, on the iCivics Research Advisory Board, on the advisory board of CIRCLE (the Center for Information and Research on Civic Learning), and he is a Senior Advisor to the Spencer Foundation's New Civics Initiative.
Placeholder image
Joseph Kahne
Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for Education Policy and Politics at the University of California, Riverside and Chair of the MacArthur Foundation Research Network on Youth and Participatory Politics. Joe's current research draws on a national longitudinal survey of youth (conducted in partnership with Cathy Cohen at the University of Chicago) to examine ways participation with digital media is shaping youth civic and political engagement. He also studies ways that educational efforts can improve the quantity, quality, and equality of youth civic and political engagement. A former high school social studies teacher, Joe is Co-Principal Investigator (with Erica Hodgin) of Educating for Democracy in the Digital Age—A district-wide effort in Oakland California to provide all youth with rich and equitable opportunities to work for change in their communities. He sits on the steering committee of the National Campaign for the Civic Mission of Schools, on the iCivics Research Advisory Board, on the advisory board of CIRCLE (the Center for Information and Research on Civic Learning), and he is a Senior Advisor to the Spencer Foundation's New Civics Initiative.
Placeholder image
Joseph Kahne
Joseph Kahne, Ph.D. is the Ted and Jo Dutton Presidential Chair for Education Policy and Politics at the University of California, Riverside and Chair of the MacArthur Foundation Research Network on Youth and Participatory Politics. Joe's current research draws on a national longitudinal survey of youth (conducted in partnership with Cathy Cohen at the University of Chicago) to examine ways participation with digital media is shaping youth civic and political engagement. He also studies ways that educational efforts can improve the quantity, quality, and equality of youth civic and political engagement. A former high school social studies teacher, Joe is Co-Principal Investigator (with Erica Hodgin) of Educating for Democracy in the Digital Age—A district-wide effort in Oakland California to provide all youth with rich and equitable opportunities to work for change in their communities. He sits on the steering committee of the National Campaign for the Civic Mission of Schools, on the iCivics Research Advisory Board, on the advisory board of CIRCLE (the Center for Information and Research on Civic Learning), and he is a Senior Advisor to the Spencer Foundation's New Civics Initiative.

<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
  • facebook

  • Instagram

  • Twitter

  • LinkedIn

  • YouTube

  • Accessibility
  • Privacy Policy
  • Contact Us
Sign up for our newsletter
ICPSR

© 2025 The Regents of the University of Michigan. ICPSR is part of the Institute for Social Research at the University of Michigan.