Foundation Differentials

Github

Download the stylesheet for all the components that were removed from Foundation 5.

Download

Abide

5
Passwords must be at least 8 characters with 1 capital letter, 1 number, and one special character.
6 

<form data-abide>
  <div class="name-field">
    <label>Your name <small>required</small>
      <input type="text" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Name is required and must be a string.</small>
  </div>
</form>
                

<form data-abide novalidate>
  <label>Full Name Required
    <input type="text" id="text" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
    <span class="form-error">
      I'm required!
    </span>
  </label>
  <p class="help-text" id="exampleHelpText">Enter your name please.</p>
</form>

Accordion

5
6 

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>
                

<ul class="accordion" data-accordion role="tablist">
  <li class="accordion-item is-active">
    <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
    <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item is-active">
    <a href="#panel2d" role="tab" class="accordion-title" id="panel2d-heading" aria-controls="panel2d">Accordion 2</a>
    <div id="panel2d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel2d-heading">
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
    <li class="accordion-item is-active">
    <a href="#panel3d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel3d">Accordion 3</a>
    <div id="panel3d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel3d-heading">
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

Accordion Menu


<ul class="vertical menu" data-accordion-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested is-active">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#">Item 1Ai</a></li>
          <li><a href="#">Item 1Aii</a></li>
          <li><a href="#">Item 1Aiii</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

Alerts

This is a Foundation 5 Alert
×
This is a Foundation 6 Alert

<div class="alert-box" data-alert>
   <h5>This is a Foundation 5 Alert</h5>
   <a href="#" class="close">&times;</a>
</div>
                

<div class="alert callout" data-closable>
   <h5>This is a Foundation 6 Alert</h5>
   <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
      <span aria-hidden="true">&times;</span>
   </button>
</div>

Badge

2 3 A B 

<span class="secondary badge">2</span>
<span class="success badge">3</span>
<span class="alert badge">A</span>
<span class="warning badge">B</span>

Block Grid

5 6 

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Cloning</a></li>
</ul>
                

<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Gene Splicing</li>
    <li>
      <span class="show-for-sr">Current: </span> Cloning
    </li>
  </ul>
</nav>

Breadcrumbs

5 6 

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Cloning</a></li>
</ul>
                

<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Gene Splicing</li>
    <li>
      <span class="show-for-sr">Current: </span> Cloning
    </li>
  </ul>
</nav>

Button

Buttons are called the same way as Foundation 5, just some new features. The classes .round and .radius are removed from Foundation 6.

5 Round Button Radius Button
6 

<a href="#" class="button round">Round Button</a>
<a href="#" class="button radius">Radius Button</a>
                

<button class="hollow button" href="#">Primary Color</button>
<button class="secondary hollow button" href="#">Secondary Color</button>

Button Group

5 6
One Two Three 

<ul class="button-group">
  <li><a href="#" class="button">Button 1</a></li>
  <li><a href="#" class="button">Button 2</a></li>
  <li><a href="#" class="button">Button 3</a></li>
</ul>
                

<div class="button-group">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</a>
</div>

Callout

Previously known as .panel

5
This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

6
This is a callout.

It has an easy to override visual style, and is appropriately subdued.


<div class="panel">
  <h5>This is a regular panel.</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
                

<div class="callout">
  <h5>This is a callout.</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>

Clearing


<ul class="clearing-thumbs" data-clearing>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
</ul>

Close Button

The tiny blue X is Foundation 5 and the bigger X is Foundation 6.

× 

<a href="#" class="close">&times;</a>
                

<button class="close-button" aria-label="Close alert" type="button">
  <span aria-hidden="true">&times;</span>
</button>

Drilldown Menu


<ul class="vertical menu" data-drilldown>
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

Dropdown Button

5
6 

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Dropdown Button</button><br>
<ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
                

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown>
  Just some junk that needs to be said. Or not. Your choice.
</div>

Dropdown Menu


<ul class="dropdown menu" data-dropdown-menu>
  <li>
  <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Equalizer

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.


<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>
                

<div class="row" data-equalizer data-equalize-on="medium">
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

Float Classes

5
Float Right Float Left
6
Left Right 

  <a class="button right">Float Right</a>
  <a class="button left">Float Left</a>
                

  <a class="button float-left">Left</a>
  <a class="button float-right">Right</a>

Icon Bar


<div class="icon-bar five-up">
  <a class="item">
    <img src="../assets/img/images/fi-home.svg" >
    <label>Home</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-bookmark.svg" >
    <label>Bookmark</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-info.svg" >
    <label>Info</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-mail.svg" >
    <label>Mail</label>
  </a>
  <a class="item">
    <img src="../assets/img/images/fi-like.svg" >
    <label>Like</label>
  </a>
</div>

Inline List

5 6 

<ul class="inline-list">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>
                

<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Interchange

5 6 

<img data-interchange="[http://placehold.it/800x350, (small)], [http://placehold.it/1000x350, (medium)], [http://placehold.it/1500x350, (large)]" data-uuid="interchange-im5a0u9m0" src="http://placehold.it/1500x350">
                

<img data-interchange="[http://placehold.it/800x350, small], [http://placehold.it/1000x350, medium], [http://placehold.it/1500x350, large]">

Joyride

Start Joyride

Coming Soon!


<ol class="joyride-list" data-joyride>
  <li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">
    <p>Hello and welcome to the Joyride <br>documentation page.</p>
  </li>
  <li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">
    <h4>Stop #1</h4>
    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
  </li>
  <li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">
    <h4>Stop #2</h4>
    <p>Get the details right by styling Joyride with a custom stylesheet!</p>
  </li>
  <li data-button="End" data-prev-text="Prev">
    <h4>Stop #3</h4>
    <p>It works as a modal too!</p>
  </li>
</ol>

Magellan

Pretty much just start over.

5
Build with HTML
Arrival 2
6 

<div data-magellan-expedition="fixed">
  <dl class="sub-nav">
    <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
    <dd data-magellan-arrival="js"><a href="#js">Arrival 2</a></dd>
  </dl>
</div>
<h3 data-magellan-destination="arrival">Arrival</h3>
<a name="arrival"></a>
<h3 data-magellan-destination="destination">Destination</h3>
<a name="destination"></a>
                

<ul class="horizontal menu" data-magellan>
  <li><a href="#first">First Arrival</a></li>
  <li><a href="#second">Second Arrival</a></li>
  <li><a href="#third">Third Arrival</a></li>
</ul>
<div class="sections">
  <section id="first" data-magellan-target="first">First Section</section>
  <section id="second" data-magellan-target="second">Second Section</section>
  <section id="third" data-magellan-target="third">Third Section</section>
</div>

Media Object

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.


<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src="http://placehold.it/350x350" alt=""/>
    </div>
  </div>
  <div class="media-object-section">
    <h4>Dreams feel real while we're in them.</h4>
    <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
  </div>
</div>

Menu

5 6

Off Canvas


<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" href="#" >Menu</a>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        ...
        </ul>
    </aside>

    <!-- main content goes here -->
    <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>

  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>
                

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Menu -->
        <ul class="vertical menu">
          <li><a href="#">Foundation</a></li>
        </ul>

      </div>

      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Page content -->
      </div>
    </div>
  </div>

Orbit

6
  • Space, the final frontier.
  • Lets Rocket!
  • Encapsulating
  • Outta This World

<div class="orbit-container">
  <ul data-orbit class="example-orbit orbit-slides-container">
    <li>
      <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
      <div class="orbit-caption">
        Caption One.
      </div>
    </li>
    <li class="active">
      <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 1" />
      <div class="orbit-caption">
        Caption Two.
      </div>
    </li>
    <li>
      <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 1" />
      <div class="orbit-caption">
        Caption Three.
      </div>
    </li>
  </ul>
  <a href="#" class="orbit-prev">Prev <span></span></a>
  <a href="#" class="orbit-next">Next <span></span></a>
  <div class="orbit-slide-number">
    <span>1</span> of <span>3</span>
  </div>
  <div class="orbit-timer">
    <span></span>
    <div class="orbit-progress"></div>
  </div>
</div>
<ol class="orbit-bullets">
  <li data-orbit-slide-number="1"></li>
  <li data-orbit-slide-number="2" class="active"></li>
  <li data-orbit-slide-number="3"></li>
</ol>
                

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
      <figcaption class="orbit-caption">Encapsulating</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
      <figcaption class="orbit-caption">Outta This World</figcaption>
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>

Pagination

5 6 

<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>
                

<ul class="pagination" role="navigation" aria-label="Pagination">
  <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
  <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
  <li><a href="#" aria-label="Page 2">2</a></li>
  <li><a href="#" aria-label="Page 3">3</a></li>
  <li><a href="#" aria-label="Page 4">4</a></li>
  <li class="ellipsis" aria-hidden="true"></li>
  <li><a href="#" aria-label="Page 12">12</a></li>
  <li><a href="#" aria-label="Page 13">13</a></li>
  <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
</ul>

Pricing Table

5 - Andy Cochran submitted to Foundation Building Blocks 

<ul class="pricing-table">
  <li class="title">Standard</li>
  <li class="price">$99.99</li>
  <li class="description">An awesome description</li>
  <li class="bullet-item">1 Database</li>
  <li class="bullet-item">5GB Storage</li>
  <li class="bullet-item">20 Users</li>
  <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
</ul>
                

<ul class="pricing-table no-bullet text-center">
  <li class="title">Standard</li>
  <li class="price">$99.99</li>
  <li class="description">An awesome description</li>
  <li>1 Database</li>
  <li>5GB Storage</li>
  <li>20 Users</li>
  <li><a class="button" href="#">Buy Now</a></li>
</ul>

Progress Bar

5
6 

<div class="progress">
  <span class="meter" style="width:50%;"></span>
</div>
                

<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
  <div class="progress-meter" style="width: 50%"></div>
</div>

Radius/Round

5
Alert with Radius×
Alert with Round×

<div class="alert-box radius" data-alert>Alert with Radius<a href="#" class="close">&times;</a></div>
<div class="alert-box round" data-alert>Alert with Round<a href="#" class="close">&times;</a></div>

Range Slider

5
6 

<div class="range-slider" data-slider>
  <span class="range-slider-handle" role="slider"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>
                

<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

Responsive Menu


<ul class="vertical medium-horizontal menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

Responsive Toggle

Menu

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

Reveal

5 6 Click me for a modal

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!


<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
                

<p><a data-open="exampleModal1">Click me for a modal</a></p>

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Side Nav

5 6 

<ul class="side-nav">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>
                

<ul class="menu vertical">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Split Button

5 Split Button
6 

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Dropdown Button</button><br>
<ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
                

<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  <ul class="menu vertical">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
  </ul>
</div>

Sticky

6 

<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
    ...
  </nav>
</div>
                

<div data-sticky-container>
  <div class="sticky" data-sticky data-anchor="foo">
    ...
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sub Nav

5
Filter:
All
Active
Pending
Suspended
6

Switches

5
6 

<div class="switch">
  <input id="exampleCheckboxSwitch" type="checkbox">
  <label for="exampleCheckboxSwitch"></label>
</div> 
                

<div class="switch">
    <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch"></label>
</div>

Tabs

5

This is the first panel of the basic tab example. You can place all sorts of content here including a grid.

This is the second panel of the basic tab example. This is the second panel of the basic tab example.

6

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.


<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
</div>
                

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
  </div>
</div>

Thumbnails

5 6 

<a class="th" href="http://placehold.it/100x100">
  <img src="http://placehold.it/100x100" alt="">
</a>
                

<img class="thumbnail" src="http://placehold.it/100x100" alt="">

Title Bar

6
Foundation 

<div class="title-bar">
  <div class="title-bar-left">
    <button class="menu-icon" type="button"></button>
    <span class="title-bar-title">Foundation</span>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button"></button>
  </div>
</div>

Toggler

Expand!


<p><a data-toggle="menuBar">Expand!</a></p>

<ul class="menu" id="menuBar" data-toggler=".expanded">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Tooltip

5 extended information

6 scarabaeus 

<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
                

<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' title="Fancy word for a beetle.">scarabaeus</span>

Top Bar

5 6
Menu


<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>
                

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

V Card


<ul class="vcard">
  <li class="fn">Gaius Baltar</li>
  <li class="street-address">123 Colonial Ave.</li>
  <li class="locality">Caprica City</li>
  <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
  <li class="email"><a href="#">g.baltar@example.com</a></li>
</ul>

Visibility Classes

5

This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.

You are not on a small screen. You are not on a medium, large, xlarge, or xxlarge screen. You are not on a medium screen. You are not on a large, xlarge, or xxlarge screen. You are not on a large screen. You are not on an xlarge screen and up. You are not on an xlarge screen. You are not on an xxlarge screen.

6

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.

You are not on a medium screen or larger.

You are not on a large screen or larger.

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

Can't touch this.

You are in landscape orientation.

You are in portrait orientation.

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.


<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
<strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong>
<strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
<strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong>
<strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
<strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
<strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
                

<p>You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>
<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>
<p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p>
<p class="hide">Can't touch this.</p>
<p class="invisible">Can sort of touch this.</p>
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>
<p class="show-for-sr">This text can only be read by a screen reader.</p>
<p>There's a line of text above this one, you just can't see it.</p>