Grid

Code Examples

Grid patterns are elements containing items that are used for positioning their contents on a page.

Stack Object

The Stack Object lays items out in a column. The Stack Object is a foundation that can be used to create a grid. You can combine a series of Stack Objects to create rows and columns. The Stack Object is by name, mobile-first and responsive. The items inside always stack by default. They also can split to a side by side layout at different breakpoints via a modifier class. See tabular data below for modifiers and more information.

Angular

The Stack component in spark-core-angular consists of one Angular component and one directive:

  • sprk-stack
  • sprkStackItem

The component expects you to put sprkStackItem elements inside it.

React

The Stack component expects SprkStackItem children.

<div class="sprk-o-Stack">
  <div class="sprk-o-Stack__item">
  </div>

  <div class="sprk-o-Stack__item">
  </div>
</div>
          
<sprk-stack>
  <div sprkStackItem></div>
  <div sprkStackItem></div>
</sprk-stack>
<SprkStack>
  <SprkStackItem></SprkStackItem>
  <SprkStackItem></SprkStackItem>
</SprkStack>

Information

See below for available customization options:

Component Input Type Description
sprk-stack splitAt string The value supplied can be 'tiny', 'small', 'medium', 'large', or 'huge'. This is used as the breakpoint at which the component moves or "splits" to a side by side layout.
sprk-stack itemSpacing string The value supplied can be 'tiny', 'small', 'medium', 'large', or 'huge'. This is used as the amount of spacing between Stack items.
sprk-stack analyticsString string This value is used for the data-analytics attribute.
sprk-stack additionalClasses string Allows a string of classes to add, in addition to the spark classes. Intended for overrides.

Information

See below for available customization options:

Component Prop Type Description
SprkStack children SprkStackItem The value supplied will be used as the children of SprkStack. This component expects SprkStackItem as children.
SprkStackItem children String The value supplied will be used as the children of the SprkStackItem.
SprkStack splitAt String The value supplied can be 'extraTiny', 'tiny', 'small', 'medium', 'large', or 'huge'. This is used as the breakpoint at which the component moves or "splits" to a side by side layout.
SprkStack itemSpacing String The value supplied can be 'tiny', 'small', 'medium', 'large', or 'huge'. This is used as the amount of spacing between Stack items.
SprkStack additionalClasses String Allows a string of classes to add, in addition to the Spark classes. Intended for overrides.
SprkStackItem additionalClasses String Allows a string of classes to add, in addition to the Spark classes. Intended for overrides.
SprkStackItem idString String The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.
SprkStack idString String The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

Stack and Stack Item Options

Stack Options

Modifier Class Description
.sprk-o-Stack--center-row When placed on a container, its children will be centered along the main-axis of the container.
.sprk-o-Stack--center-column When placed on a container, its children will be centered along the cross axis of the container.
.sprk-o-Stack--tiny This is used for spacing out items in the Stack container. When placed on a container, its children will have "tiny" space on the bottom (on the side if they are in "split" position). The last item will not have space.
.sprk-o-Stack--small This is used for spacing out items in the Stack container. When placed on a container, its children will have "small" space on the bottom (on the side if they are in "split" position). The last item will not have space.
.sprk-o-Stack--medium This is used for spacing out items in the Stack container. When placed on a container, its children will have "medium" space on the bottom (on the side if they are in "split" position). The last item will not have space.
.sprk-o-Stack--large This is used for spacing out items in the Stack container. When placed on a container, its children will have "large" space on the bottom (on the side if they are in "split" position). The last item will not have space.
.sprk-o-Stack--huge This is used for spacing out items in the Stack container. When placed on a container, its children will have "huge" space on the bottom (on the side if they are in "split" position). The last item will not have space.
.sprk-o-Stack--split@xxs When placed on a container, its children will go from a stacked layout to a side by side layout at the extra extra small split breakpoint.
.sprk-o-Stack--split@xs When placed on a container, its children will go from a stacked layout to a side by side layout at the extra small split breakpoint.
.sprk-o-Stack--split@s When placed on a container, its children will go from a stacked layout to a side by side layout at the small split breakpoint.
.sprk-o-Stack--split@m When placed on a container, its children will go from a stacked layout to a side by side layout at the medium split breakpoint.
.sprk-o-Stack--split@l When placed on a container, its children will go from a stacked layout to a side by side layout at the large split breakpoint.
.sprk-o-Stack--split@xl When placed on a container, its children will go from a stacked layout to a side by side layout at the extra large split breakpoint.
.sprk-o-Stack--split-reverse@xxs When placed on a container, its children's position in the row will be reversed at the extra extra small split breakpoint.
.sprk-o-Stack--split-reverse@xs When placed on a container, its children's position in the row will be reversed at the extra small split breakpoint.
.sprk-o-Stack--split-reverse@s When placed on a container, its children's position in the row will be reversed at the small split breakpoint.
.sprk-o-Stack--split-reverse@m When placed on a container, its children's position in the row will be reversed at the medium split breakpoint.
.sprk-o-Stack--split-reverse@l When placed on a container, its children's position in the row will be reversed at the large split breakpoint.
.sprk-o-Stack--split-reverse@xl When placed on a container, its children's position in the row will be reversed at the extra large split breakpoint.
.sprk-o-Stack--end-column When placed on a container, its children will be aligned to the end of the container when flex-direction is column. You can choose for this to be constant or add a responsive modifier and have it start at a specific breakpoint ex. sprk-o-Stack--end-row@xs (xxs, xs, s, m, l, xl).
.sprk-o-Stack--end-row When placed on a container, its children will be aligned to the end of the container when flex-direction is row. You can choose for this to be constant or add a responsive modifier and have it start at a specific breakpoint ex. sprk-o-Stack--end-row@xs (xxs, xs, s, m, l, xl).

Stack Item Options

Modifier Class Description
.sprk-o-Stack__item--flex@xs When placed on an item, it will flex to take up the remaining space in its container starting at the split breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--sixth@xl When placed on an item, its width will be 1/6 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--fifth@l When placed on an item, its width will be 1/5 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--fourth@m When placed on an item, its width will be 1/4 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--third@s When placed on an item, its width will be 1/3 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--half@xs When placed on an item, its width will be 1/2 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--three-fourths@l When placed on an item, its width will be 3/4 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--three-fifths@m When placed on an item, its width will be 3/5 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--two-fifths@s When placed on an item, its width will be 2/5 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--three-tenths@m When placed on an item, its width will be 3/10 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--seven-tenths@m When placed on an item, its width will be 7/10 of its container starting at the breakpoint specified (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--end-column When placed on a specific item, it will be aligned to the end of the container when flex-direction is column. You can also add a responsive suffix to have it start at a breakpoint that you specify (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--start-column When placed on a specific item, it will be aligned to the start of the container when flex-direction is column. You can also add a responsive suffix to have it start at a breakpoint that you specify (xxs, xs, s, m, l, xl).
.sprk-o-Stack__item--center-column When placed on a specific item, it will be centered along the cross axis of the container. You can also add a responsive suffix to have it start at a breakpoint that you specify (xxs, xs, s, m, l, xl).

Stack Object - Two Column Layout

A responsive layout that moves from two stacked columns to two 50% width side by side columns at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column size modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--half@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--half@xs"
    ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--half@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--half@xs"></SprkStackItem>
</SprkStack>

Stack Object - Three Column Layout

A responsive layout that moves from three stacked columns to three side by side columns at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column size modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--third@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--third@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--third@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--third@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--third@xs"
    ></div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--third@xs"
      ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--third@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--third@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--third@xs"></SprkStackItem>
</SprkStack>

Stack Object - Four Column Layout

A responsive layout that moves from four stacked columns to four side by side columns at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item size column modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--fourth@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--fourth@xs"
    ></div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--fourth@xs"
      ></div>
        <div
         sprkStackItem
         class="sprk-o-Stack__item--fourth@xs"
        ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fourth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fourth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fourth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fourth@xs"></SprkStackItem>
</SprkStack>

Stack Object With Split

The Stack object can have an additional modifier class to align the items side by side at a given breakpoint. The items stack until they hit the specified breakpoint. The available breakpoints are xs, s, m, l, and xl. The width of the items will be whatever their default width is.

<div class="sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s">
  <div class="sprk-o-Stack__item"></div>

  <div class="sprk-o-Stack__item"></div>
</div>
          
<sprk-stack
 itemSpacing="medium"
 splitAt="small"
>
  <div sprkStackItem></div>
  <div sprkStackItem></div>
  </sprk-stack>
<SprkStack
 itemSpacing="medium"
 splitAt="small"
>
  <SprkStackItem></SprkStackItem>
  <SprkStackItem></SprkStackItem>
  </SprkStack>

Stack Object - Five Column Layout

A responsive layout that moves from five stacked columns to five side by side columns at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column size modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--fifth@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--fifth@xs"
    ></div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--fifth@xs"
      ></div>
        <div
         sprkStackItem
         class="sprk-o-Stack__item--fifth@xs"
        ></div>
          <div
           sprkStackItem
           class="sprk-o-Stack__item--fifth@xs"
          ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs"></SprkStackItem>
</SprkStack>

Stack Object - Six Column Layout

A responsive layout that moves from six stacked columns to six side by side columns at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column size modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--sixth@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--sixth@xs"
    ></div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--sixth@xs"
      ></div>
        <div
         sprkStackItem
         class="sprk-o-Stack__item--sixth@xs"
        ></div>
          <div
           sprkStackItem
           class="sprk-o-Stack__item--sixth@xs"
          ></div>
            <div
             sprkStackItem
             class="sprk-o-Stack__item--sixth@xs"
            ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs"></SprkStackItem>
</SprkStack>

Stack Object - 75/25 Layout

A responsive layout that moves from two stacked columns to two side by side columns of 75% and 25% width at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column size modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--three-fourths@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--three-fourths@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--fourth@xs"
    ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--three-fourths@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fourth@xs"></SprkStackItem>
</SprkStack>

Stack Object - 60/40 Layout

A responsive layout that moves from two stacked columns to two side by side columns at 60% and 40% width at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column size modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--three-fifths@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--two-fifths@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--three-fifths@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--two-fifths@xs"
    ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--three-fifths@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--two-fifths@xs"></SprkStackItem>
</SprkStack>

Stack Object - 30/70 Layout

A responsive layout that moves from two stacked columns to two side by side columns at 30% and 70% width at the breakpoint you specify.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column size modifier.
  • Use padding to apply inner space to the Stack items.
<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--three-tenths@xs"></div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--seven-tenths@xs"></div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--three-tenths@xs"
  ></div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--seven-tenths@xs"
    ></div>
</sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--three-tenths@xs"></SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--seven-tenths@xs"></SprkStackItem>
</SprkStack>

Stack Object - Mixed Column Layout

You can mix and match item sizes to create your own grid. Make sure the items add up to 100% or the grid will not work.

Restrictions

  • You cannot use spacing modifier classes with the Stack item column modifier.
  • Use padding to apply inner space to the Stack items.
  • Items must add up to 1 or the grid will not work (1/2 + 1/2 = 1).

fourth

half

fourth

sixth

sixth

sixth

flex

two-fifths

fifth

fifth

fifth

Nested Item (flex)

Nested Item (flex)

half

two-fifths

three-fifths

<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      fourth
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      half
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      fourth
    </p>
  </div>
</div>

<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      sixth
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      sixth
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      sixth
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      flex
    </p>
  </div>
</div>

<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--two-fifths@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      two-fifths
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      fifth
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      fifth
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      fifth
    </p>
  </div>
</div>

<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs">
    <div class="sprk-o-Stack sprk-o-Stack--meduim sprk-o-Stack--split@xs">
      <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter">
        <p class="sprk-b-TypeBodyOne">
          Nested Item (flex)
        </p>
      </div>
      <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter">
        <p class="sprk-b-TypeBodyOne">
          Nested Item (flex)
        </p>
      </div>
    </div>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--half@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      half
    </p>
  </div>
</div>

<div class="sprk-o-Stack sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--two-fifths@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      two-fifths
    </p>
  </div>
  <div class="sprk-o-Stack__item sprk-o-Stack__item--three-fifths@xs sprk-u-AbsoluteCenter">
    <p class="sprk-b-TypeBodyOne">
      three-fifths
    </p>
  </div>
</div>
          
<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--fourth@xs sprk-u-AbsoluteCenter"
  >
    <p class="sprk-b-TypeBodyOne">
      fourth
    </p>
    </div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--half@xs sprk-u-AbsoluteCenter"
    >
      <p class="sprk-b-TypeBodyOne">
        half
      </p>
      </div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--fourth@xs sprk-u-AbsoluteCenter"
      >
        <p class="sprk-b-TypeBodyOne">
          fourth
        </p>
        </div>
</sprk-stack>

<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter"
  >
    <p class="sprk-b-TypeBodyOne">
      sixth
    </p>
    </div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter"
    >
      <p class="sprk-b-TypeBodyOne">
        sixth
      </p>
      </div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter"
      >
        <p class="sprk-b-TypeBodyOne">
          sixth
        </p>
        </div>
        <div
         sprkStackItem
         class="sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter"
        >
          <p class="sprk-b-TypeBodyOne">
            flex
          </p>
          </div>
</sprk-stack>

<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--two-fifths@xs sprk-u-AbsoluteCenter"
  >
    <p class="sprk-b-TypeBodyOne">
      two-fifths
    </p>
    </div>
    <div
     sprkStackItem
     class="sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter"
    >
      <p class="sprk-b-TypeBodyOne">
        fifth
      </p>
      </div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter"
      >
        <p class="sprk-b-TypeBodyOne">
          fifth
        </p>
        </div>
        <div
         sprkStackItem
         class="sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter"
        >
          <p class="sprk-b-TypeBodyOne">
            fifth
          </p>
          </div>
</sprk-stack>

<sprk-stack splitAt="tiny">
  <div
   sprkStackItem
   class="sprk-o-Stack__item--half@xs"
  >
    <sprk-stack
     splitAt="tiny"
     itemSpacing="medium"
    >
      <div
       sprkStackItem
       class="sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter"
      >
        <p class="sprk-b-TypeBodyOne">
          Nested Item (flex)
        </p>
        </div>
        <div
         sprkStackItem
         class="sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter"
        >
          <p class="sprk-b-TypeBodyOne">
            Nested Item (flex)
          </p>
          </div>
</sprk-stack>
</div>
<div
 sprkStackItem
 class="sprk-o-Stack__item--half@xs sprk-u-AbsoluteCenter"
>
  <p class="sprk-b-TypeBodyOne">
    half
  </p>
  </div>
  </sprk-stack>

  <sprk-stack splitAt="tiny">
    <div
     sprkStackItem
     class="sprk-o-Stack__item--two-fifths@xs sprk-u-AbsoluteCenter"
    >
      <p class="sprk-b-TypeBodyOne">
        two-fifths
      </p>
      </div>
      <div
       sprkStackItem
       class="sprk-o-Stack__item--three-fifths@xs sprk-u-AbsoluteCenter"
      >
        <p class="sprk-b-TypeBodyOne">
          three-fifths
        </p>
        </div>
  </sprk-stack>
<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fourth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      fourth
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--half@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      half
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fourth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      fourth
    </p>
  </SprkStackItem>
</SprkStack>

<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      sixth
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      sixth
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--sixth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      sixth
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      flex
    </p>
  </SprkStackItem>
</SprkStack>

<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--two-fifths@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      two-fifths
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      fifth
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      fifth
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--fifth@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      fifth
    </p>
  </SprkStackItem>
</SprkStack>

<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--half@xs">
    <SprkStack
     splitAt="tiny"
     itemSpacing="medium"
    >
      <SprkStackItem additionalClasses="sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter">
        <p className="sprk-b-TypeBodyOne">
          Nested Item (flex)
        </p>
      </SprkStackItem>
      <SprkStackItem additionalClasses="sprk-o-Stack__item--flex@xs sprk-u-AbsoluteCenter">
        <p className="sprk-b-TypeBodyOne">
          Nested Item (flex)
        </p>
      </SprkStackItem>
</SprkStack>
</SprkStackItem>
<SprkStackItem additionalClasses="sprk-o-Stack__item--half@xs sprk-u-AbsoluteCenter">
  <p className="sprk-b-TypeBodyOne">
    half
  </p>
</SprkStackItem>
</SprkStack>

<SprkStack splitAt="tiny">
  <SprkStackItem additionalClasses="sprk-o-Stack__item--two-fifths@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      two-fifths
    </p>
  </SprkStackItem>
  <SprkStackItem additionalClasses="sprk-o-Stack__item--three-fifths@xs sprk-u-AbsoluteCenter">
    <p className="sprk-b-TypeBodyOne">
      three-fifths
    </p>
  </SprkStackItem>
</SprkStack>