Layout

Layout patterns are containing elements used for positioning their contents on a page. They should be used for developing new components not already defined in Spark or for laying out a combination of Spark components. Each layout pattern consists of a containing element with optional modifiers that adjust spacing, orientation, etc.

Box Object

The Box object can be used on any element that you want to visually separate from surrounding content. The default Box object has padding inside equal to $space-inset-m. See Box Sizing for alternate options. The border is added here for visibility.

<div class="sprk-o-Box">
</div>

Box Object Sizing

There are five padding sizes available for the Box object. The default for Boxes is $space-inset-m, you can use the modifiers below to adjust the size.

Flush
Tiny
Small
Large
Huge
      
        // Modifier Classes
        .sprk-o-Box--flush
        .sprk-o-Box--tiny
        .sprk-o-Box--small
        .sprk-o-Box--large
        .sprk-o-Box--huge
      
    

Centered Column

The Centered Column layout object is intended to wrap main content when the desired effect is one column that centers itself on large displays. The current max-width is 1024px / 64rem;

<div class="sprk-o-CenteredColumn">
</div>

Flag Object

The Flag object is similar to the Media object. Use it any time you have an image or other media and text next to each other and you need to vertically align the text. The additional "stacked" modifier class makes the elements stack at smaller viewports.

Provide useful alternative text

Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur. Porttitor vel est id massa posuere tortor fringilla est.

<div class="sprk-o-Flag sprk-o-Flag--stacked">
  <div class="sprk-o-Flag__figure">
    <img alt="Provide useful alternative text" src="../../assets/toolkit/images/dog.jpg" />
  </div>
  <div class="sprk-o-Flag__body">
    <p>
      Lorem ipsum dolor. Sit amet pede. Tempus donec et. Suspendisse id inventore integer eum non enim diam habitant. Maecenas nunc per lacus neque egestas. Diam quod curabitur. Porttitor vel est id massa posuere tortor fringilla est.
    </p>
  </div>
</div>

Stack Object

The Stack object lays items out in a column. There are spacing modifier classes (tiny, small, medium, large and huge) available to add space between the items.

<div class="sprk-o-Stack sprk-o-Stack--medium">
  <div class="sprk-o-Stack__item">
    <button class="sprk-c-Button">Button 1</button>
  </div>

  <div class="sprk-o-Stack__item">
    <button class="sprk-c-Button">Button 2</button>
  </div>
</div>

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.

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

  <div class="sprk-o-Stack__item">
    <button class="sprk-c-Button">Button 2</button>
  </div>
</div>

Stack Object With Equal Width Items At A Breakpoint

The Stack items always use their default width when they are laid out in a column. When a Stack container uses the split modifier a new option then becomes available to make the items divide up the available space in their container equally at a specified breakpoint. This is useful when you would like stacked columns on small viewports but equal width columns on larger viewports.

<div class="sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@xs">
    <h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
      Column One
    </h2>

    <ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 1
        </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 2
        </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 3
        </a>
      </li>
    </ul>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@xs">
    <h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
      Column Two
    </h2>

    <ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 1
        </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 2
        </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 3
        </a>
      </li>
    </ul>
  </div>
</div>