Panels

Panels are a type of container that provide a means of grouping and arranging sections of content in a visually pleasing manner. Panels may contain a variety of content (images, text, tables, forms, etc.) and can be implemented in a variety of layouts to accommodate the needs of different application and screen types.

Standard Panel Example

Panel heading

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.


When to Use

  • Use a panel to group and arrange content that does not appear in another type of container, such as a table or tabbed set.
  • A panel may also be used for organizing small and/or unevenly sized tables on a screen to provide a more organized and harmonious layout.

When Not to Use

  • It is not necessary to display large tables and tabbed sets inside of a panel.

Variations

Usage and Display

  • Panel headings may appear inside or outside of the panel, except when using expand/collapse panels, which always display the heading inside of the panel.
  • Panels should have a 4-pixel corner radius.
  • Include 24 pixels of padding within the panels.
  • When a sequence of panels appear in a side-by-side arrangement, make sure that they have consistent heights.
  • Align panels to the grid.

Variations

Expand/Collapse Panel

Use an expand/collapse panel to allow expand/collapse functionality of an entire panel.

See Expand/Collapse for details.

Image Panel Example

This may be used when images are used to distinguish blocks of content on a page.

$289

Amazing Deal

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.


Developer Notes

Standard Panel

Panel heading

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim. 

<div class="spark-panel spark-panel--card col-xs-12 col-sm-6">
  <div class="spark-panel__content spark-expand">
    <h3>
      Panel heading
    </h3>
    <p>
      Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.
    </p>
    <p class="spark-expand__content">
      Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
    </p>
    <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__hide--expanded">View More<span class="spark-expand__toggle-caret"></span></button>
    <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__show--expanded">View Less<span class="spark-expand__toggle-caret"></span></button>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(el);

// jQuery
$('.spark-expand').sparkExpand();

A panel is created by adding the .spark-panel class to an element. These cards are best sized using the responsive grid. The content for the panel should be placed inside of an element with a class of .spark-panel__body. Optionally, a header can be defined using the .spark-panel__header element.

Expand/Collapse Panel

Panel Heading

Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim. 

<div class="spark-panel spark-panel--expand col-xs-12">
  <div class="spark-panel__header" role="heading" tabindex="0">
    <h4>Panel Heading</h4>
  </div>
  <div class="spark-panel__content">
    <p>
      Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
    </p>
    <p>
      Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
    </p>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-panel--expand');
var expandInstance = new Spark.Expand(el);

// jQuery
$('.spark-panel--expand').sparkExpand();

Image Heading Panel

$289

Amazing Deal

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim. 

<div class="spark-panel spark-panel--card col-xs-12 col-sm-6">
  <div class="spark-panel__masthead">
   <img src="//placekitten.com/711/400">
   <span class="spark-numerals spark-alt">$289</span>
 </div>
 <div class="spark-panel__content spark-expand">
  <h3>
    Amazing Deal
  </h3>
  <p>
    Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
  </p>
  <button class="spark-btn spark-btn--text ">Claim This Deal</button>
</div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(el);

// jQuery
$('.spark-expand').sparkExpand();

For a panel with a masthead image at the top wrap imagery in an element with a class of .spark-panel__masthead.