Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Layout

Code Examples

Spark-Core

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.

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 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>
          
<sprk-stack itemSpacing="medium">
  <button sprkButton sprkStackItem>Button 1</button>
  <button sprkButton sprkStackItem>Button 2</button>
</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 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>
          
<sprk-stack itemSpacing="medium" splitAt="small">
  <button sprkButton sprkStackItem>Button 1</button>
  <button sprkButton sprkStackItem>Button 2</button>
</sprk-stack>

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.

Column One

Column Two 

<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>
          
<sprk-stack itemSpacing="medium" splitAt="tiny">
  <div sprkStackItem class="sprk-o-Stack__item--equal@xs">
    <h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
       Column One
     </h2>

    <sprk-stack itemSpacing="small">
      <div sprkStackItem>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 1
        </a>
      </div>

      <div sprkStackItem>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 2
        </a>
      </div>

      <div sprkStackItem>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 3
        </a>
      </div>
    </sprk-stack>
  </div>

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

    <sprk-stack itemSpacing="small">
      <div sprkStackItem>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 1
        </a>
      </div>

      <div sprkStackItem>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 2
        </a>
      </div>

      <div sprkStackItem>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
          Link 3
        </a>
      </div>
    </sprk-stack>
  </div>
</sprk-stack>
sparkdesignsystem@quickenloans.com