Accordions

Some content. 
<div class="accordions">
    <div class="accordion accordion-is-shown">
        <button type="button" class="button button--white accordion--button" id="accordion-button-1" aria-controls="accordion-content-1"
            aria-selected="true" role="tab">
            Accordion 1
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-1" aria-labelledby="accordion-button-1" tabindex="0" aria-hidden="false"
            aria-expanded="true" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
    <div class="accordion">
        <button type="button" class="button button--white accordion--button" id="accordion-button-2" aria-controls="accordion-content-2"
            aria-selected="false" role="tab">
            Accordion 2
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-2" aria-labelledby="accordion-button-2" tabindex="-1" aria-hidden="true"
            aria-expanded="false" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
</div>

Bands

This is a primary color band.

<div class="band band--dark band--primary-color"><div class="inner band--inner"><p>This is a primary color band.</p></div></div>

This is a secondary color band.

<div class="band band--dark band--secondary-color"><div class="inner band--inner"><p>This is a secondary color band.</p></div></div>

This is a tertiary color band.

<div class="band band--dark band--tertiary-color"><div class="inner band--inner"><p>This is a tertiary color band.</p></div></div>

This is a white band.

<div class="band band--white"><div class="inner band--inner"><p>This is a white band.</p></div></div>

Buttons

<button type="button" class="button">Button</button>
<button type="button" class="button button--link">Button Link</button>
<button type="button" class="button button--white">Button white</button>
<button type="button" class="button button--gray">Button gray</button>
<button type="button" class="button button--primary-color">Button primary color</button>
<button type="button" class="button button--secondary-color">Button secondary color</button>
<button type="button" class="button button--tertiary-color">Button tertiary color</button>

Link Buttons

Button 
<a href="#" class="button">Button</a>
Button Link 
<a href="#" class="button button--link">Button Link</a>
Button white
<a href="#" class="button button--white">Button white</a>
Button gray
<a href="#" class="button button--gray">Button gray</a>
Button black
<a href="#" class="button button--black">Button black</a>
Button primary color
<a href="#" class="button button--primary-color">Button primary color</a>
Button secondary color
<a href="#" class="button button--secondary-color">Button secondary color</a>
Button tertiary color
<a href="#" class="button button--tertiary-color">Button tertiary color</a>

Modals

<button type="button" class="button button--white open-modal" aria-controls="example-modal">
    Example Modal
</button>
<div class="modal" id="example-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="inner modal--inner">
        <div class="modal--centered">
            <div class="modal--centered-inner">
                <div class="modal--content margin--off">
                    <div class="modal--header">
                        <h4 aria-labelledby="example-modal">Standard Modal</h4>
                    </div>
                    <div class="modal--body">
                        <p>This is a standard modal.</p>
                    </div>
                    <div class="modal--footer margin--off">
                        <button type="button" class="button button--primary-color close-modal">Save</button>
                        <button type="button" class="button button--white close-modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Tables

Framework Version Size Initial Release Developer Website
AngularJS 2.20 144kb October 20, 2010 Google https://angular.io/
React 15.4.0 128kb March 2013 Facebook, Instagram http://facebook.github.io/react
Knockout 3.4.1 58kb July 5, 2010 Steve Sanderson http://knockoutjs.com/
Ember 2.10.0 514kb December 8, 2011 Ember Core Team https://github.com/emberjs/ember.js
Backbone.js 1.3.3 7.5kb October 13, 2010 Jeremy Ashkenas http://backbonejs.org/
Meteor 1.4 ? January 20, 2012 Meteor Development Group https://www.meteor.com/
Sails 0.12 ? 2012 Balderdash Design Company & The Treeline Company http://sailsjs.org/

Block Tables

Framework Version Size Initial Release Developer Website
AngularJS 2.20 144kb October 20, 2010 Google https://angular.io/
React 15.4.0 128kb March 2013 Facebook, Instagram http://facebook.github.io/react
Knockout 3.4.1 58kb July 5, 2010 Steve Sanderson http://knockoutjs.com/
Ember 2.10.0 514kb December 8, 2011 Ember Core Team https://github.com/emberjs/ember.js
Backbone.js 1.3.3 7.5kb October 13, 2010 Jeremy Ashkenas http://backbonejs.org/
Meteor 1.4 ? January 20, 2012 Meteor Development Group https://www.meteor.com/
Sails 0.12 ? 2012 Balderdash Design Company & The Treeline Company http://sailsjs.org/ 
<table class="table table--block">
    <thead class="table--header">
        <tr class="table--row">
            <th class="table--header-cell">Framework</th>
            <th class="table--header-cell">Version</th>
            <th class="table--header-cell">Size</th>
            <th class="table--header-cell">Initial Release</th>
            <th class="table--header-cell">Developer</th>
            <th class="table--header-cell">Website</th>
        </tr>
    </thead>
    <tbody class="table--body">
        <tr class="table--row">
            <td class="table--cell" data-table-header="Framework">AngularJS</td>
            <td class="table--cell" data-table-header="Version">2.20</td>
            <td class="table--cell" data-table-header="Size">144kb</td>
            <td class="table--cell" data-table-header="Initial Release">October 20, 2010</td>
            <td class="table--cell" data-table-header="Developer">Google</td>
            <td class="table--cell" data-table-header="Website"><a href="https://angular.io/">https://angular.io/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell" data-table-header="Framework">React</td>
            <td class="table--cell" data-table-header="Version">15.4.0</td>
            <td class="table--cell" data-table-header="Size">128kb</td>
            <td class="table--cell" data-table-header="Initial Release">March 2013</td>
            <td class="table--cell" data-table-header="Developer">Facebook, Instagram</td>
            <td class="table--cell" data-table-header="Website"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell" data-table-header="Framework">Knockout</td>
            <td class="table--cell" data-table-header="Version">3.4.1</td>
            <td class="table--cell" data-table-header="Size">58kb</td>
            <td class="table--cell" data-table-header="Initial Release">July 5, 2010</td>
            <td class="table--cell" data-table-header="Developer">Steve Sanderson</td>
            <td class="table--cell" data-table-header="Website"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell" data-table-header="Framework">Ember</td>
            <td class="table--cell" data-table-header="Version">2.10.0</td>
            <td class="table--cell" data-table-header="Size">514kb</td>
            <td class="table--cell" data-table-header="Initial Release">December 8, 2011</td>
            <td class="table--cell" data-table-header="Developer">Ember Core Team</td>
            <td class="table--cell" data-table-header="Website"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell" data-table-header="Framework">Backbone.js</td>
            <td class="table--cell" data-table-header="Version">1.3.3</td>
            <td class="table--cell" data-table-header="Size">7.5kb</td>
            <td class="table--cell" data-table-header="Initial Release">October 13, 2010</td>
            <td class="table--cell" data-table-header="Developer">Jeremy Ashkenas</td>
            <td class="table--cell" data-table-header="Website"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell" data-table-header="Framework">Meteor</td>
            <td class="table--cell" data-table-header="Version">1.4</td>
            <td class="table--cell" data-table-header="Size">?</td>
            <td class="table--cell" data-table-header="Initial Release">January 20, 2012</td>
            <td class="table--cell" data-table-header="Developer">Meteor Development Group</td>
            <td class="table--cell" data-table-header="Website"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell" data-table-header="Framework">Sails</td>
            <td class="table--cell" data-table-header="Version">0.12</td>
            <td class="table--cell" data-table-header="Size">?</td>
            <td class="table--cell" data-table-header="Initial Release">2012</td>
            <td class="table--cell" data-table-header="Developer">Balderdash Design Company & The Treeline Company</td>
            <td class="table--cell" data-table-header="Website"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
        </tr>
    </tbody>
</table>

Fixed Tables

Framework Version Size Initial Release Developer Website
AngularJS 2.20 144kb October 20, 2010 Google https://angular.io/
React 15.4.0 128kb March 2013 Facebook, Instagram http://facebook.github.io/react
Knockout 3.4.1 58kb July 5, 2010 Steve Sanderson http://knockoutjs.com/
Ember 2.10.0 514kb December 8, 2011 Ember Core Team https://github.com/emberjs/ember.js
Backbone.js 1.3.3 7.5kb October 13, 2010 Jeremy Ashkenas http://backbonejs.org/
Meteor 1.4 ? January 20, 2012 Meteor Development Group https://www.meteor.com/
Sails 0.12 ? 2012 Balderdash Design Company & The Treeline Company http://sailsjs.org/ 
<table class="table table--fixed">
    <thead class="table--header">
        <tr class="table--row">
            <th class="table--header-cell">Framework</th>
            <th class="table--header-cell">Version</th>
            <th class="table--header-cell">Size</th>
            <th class="table--header-cell">Initial Release</th>
            <th class="table--header-cell">Developer</th>
            <th class="table--header-cell">Website</th>
        </tr>
    </thead>
    <tbody class="table--body">
        <tr class="table--row">
            <td class="table--cell">AngularJS</td>
            <td class="table--cell">2.20</td>
            <td class="table--cell">144kb</td>
            <td class="table--cell">October 20, 2010</td>
            <td class="table--cell">Google</td>
            <td class="table--cell"><a href="https://angular.io/">https://angular.io/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">React</td>
            <td class="table--cell">15.4.0</td>
            <td class="table--cell">128kb</td>
            <td class="table--cell">March 2013</td>
            <td class="table--cell">Facebook, Instagram</td>
            <td class="table--cell"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Knockout</td>
            <td class="table--cell">3.4.1</td>
            <td class="table--cell">58kb</td>
            <td class="table--cell">July 5, 2010</td>
            <td class="table--cell">Steve Sanderson</td>
            <td class="table--cell"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Ember</td>
            <td class="table--cell">2.10.0</td>
            <td class="table--cell">514kb</td>
            <td class="table--cell">December 8, 2011</td>
            <td class="table--cell">Ember Core Team</td>
            <td class="table--cell"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Backbone.js</td>
            <td class="table--cell">1.3.3</td>
            <td class="table--cell">7.5kb</td>
            <td class="table--cell">October 13, 2010</td>
            <td class="table--cell">Jeremy Ashkenas</td>
            <td class="table--cell"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Meteor</td>
            <td class="table--cell">1.4</td>
            <td class="table--cell">?</td>
            <td class="table--cell">January 20, 2012</td>
            <td class="table--cell">Meteor Development Group</td>
            <td class="table--cell"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Sails</td>
            <td class="table--cell">0.12</td>
            <td class="table--cell">?</td>
            <td class="table--cell">2012</td>
            <td class="table--cell">Balderdash Design Company & The Treeline Company</td>
            <td class="table--cell"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
        </tr>
    </tbody>
</table>

Product Cards

Bang Energy

Fuel Your Destiny

Learn More

Barq's

Since 1898 Barq's Root Beer has had a simple slogan- DRINK BARQ'S. IT'S GOOD™. After more than a century, it's (still) good.

Learn More

BODYARMOR

BODYARMOR is a premium, sports drink that provides superior hydration.

Learn More

Coca-Cola

Coca-Cola is the most popular soft drink in history, as well as the best-known brand in the world.

Learn More

Coca-Cola Zero Sugar

New recipe tastes like a Coke with zero sugar and zero calories.

Learn More 
[pods name="Pod Name" limit="5" template="Your Pod Template Name"][/pods]