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.

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

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.

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

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>

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>

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>

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>

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>

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>

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>

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>