Buttons

a.button 
<a class="button" href="#" role="button">a.button</a>
<button class="button" type="button">button.button</button>

Footer

<footer class="footer" role="contentinfo">
  <div class="container">
    <div class="row">
      <div class="column u-compact">
        <p><b>Copyright &copy; [year] [copyright holder]</b></p>
      </div>

      <div class="column u-compact u-text-right">
        <ul class="u-inline-list">
          <li><a href="#" class="u-click-target">About</a></li>
          <li><a href="#" class="u-click-target">Podcasts</a></li>
          <li><a href="#" class="u-click-target"><i class="ion-social-twitter"></i><span class="u-sr-only">Twitter</span></a></li>
          <li><a href="#" class="u-click-target"><i class="ion-social-facebook"></i><span class="u-sr-only">Facebook</span></a></li>
          <li><a href="#" class="u-click-target"><i class="ion-social-github"></i><span class="u-sr-only">GitHub</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Masthead

<header class="masthead" role="banner">
  <div class="container u-compact u-text-center">
    <h1>Howdy!</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</header>

Navbar

<nav class="navbar" role="navigation">
  <div class="container">
    <nav class="nav navbar-nav" role="navigation">
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
    </nav>

    <nav class="nav navbar-nav navbar-right" role="navigation">
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
    </nav>
  </div>
</nav>

Inverse navbar

<nav class="navbar navbar--inverse" role="navigation">
  <div class="container">
    <nav class="nav navbar-nav" role="navigation">
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
    </nav>

    <nav class="nav navbar-nav navbar-right" role="navigation">
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
      <a class="nav-link" href="#">Link</a>
    </nav>
  </div>
</nav>

Slate

Lorem ipsum dolor sit amet

<div class="slate u-compact u-text-center">
  <h3>Lorem ipsum dolor sit amet</h3>
</div>

Slide In

Simple CSS3 slide-in panel based on http://codyhouse.co/gem/css-slide-in-panel. Can be used through the HTML5 data API or as a jQuery plugin (default options shown):

$(".slide-in").slideIn({
  classes: {
    open: "is-open"
  }
})

Hello World!

<button class="button" type="button" data-slide-in-toggle="slide-in">
  Show Slide In
</button>

<div class="slide-in slide-in--right" id="slide-in" data-slide-in>
  <header class="slide-in-header" role="banner">
    <h4>This is a Slide In</h4>
    <button class="slide-in-close" type="button" data-slide-in-close>
      <i class="ion-close"></i>
    </button>
  </header>

  <section class="slide-in-content">
    <p>Hello World!</p>
  </section>
</div>

Streamer

The Modem Streamer is used for playing back and visualizing an audio stream. It supports playback of MP3, MP4/AAC, and OGG media streams through the Web Audio API. Can be used through the HTML5 data API or as a jQuery plugin (default options shown):

$("audio.streamer").streamer({
  classes: {
    wrapper: 'streamer',
    button: 'streamer-button'
  },
  icons: {
    play: 'ion-play',
    pause: 'ion-pause'
  },
  labels: {
    play: 'Continue playing',
    pause: 'Stop playing'
  },
  waveform: {
    stroke: {
      width: 2,
      color: '#666'
    }
  }
})
<audio data-streamer preload="none">
  <source src="audio/example.ogg" type="audio/ogg">
  <source src="audio/example.mp3" type="audio/mpeg">
</audio>

When offline

<audio data-streamer>
  <source src="audio/offline.ogg" type="audio/ogg">
  <source src="audio/offline.mp3" type="audio/mpeg">
</audio>

Within masthead

<div class="masthead">
  <div class="masthead-fill">
    <audio data-streamer preload="none">
      <source src="audio/example.ogg" type="audio/ogg">
      <source src="audio/example.mp3" type="audio/mpeg">
    </audio>
  </div>
</div>

Tables

Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67 
<table class="table">
  <tbody>
    <tr>
      <th>Number</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
  </tbody>
</table>