<div class="accordion">
    <div class="accordion__group accordion-content-show">
        <a class="accordion__trigger">Accordion item #1</a>
        <div class="accordion__content">
            <div class="grid">
                <div class="column-12">
                    <p>You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                    <p>Okay, I like a challenge. Oh, I think we should just stay friends. And from now on you're all named Bender Jr. Why did you bring us here? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Why would I want to know that?</p>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__group">
        <a class="accordion__trigger">Accordion item #2</a>
        <div class="accordion__content">
            <div class="grid">
                <div class="column-12">
                    <p>You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                    <p>Okay, I like a challenge. Oh, I think we should just stay friends. And from now on you're all named Bender Jr. Why did you bring us here? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Why would I want to know that?</p>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__group">
        <a class="accordion__trigger">Accordion item #3</a>
        <div class="accordion__content">
            <div class="grid">
                <div class="column-12">
                    <p>You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                    <p>Okay, I like a challenge. Oh, I think we should just stay friends. And from now on you're all named Bender Jr. Why did you bring us here? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Why would I want to know that?</p>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__group">
        <a class="accordion__trigger">Accordion item #4</a>
        <div class="accordion__content">
            <h2>With a grid inside</h2>
            <div class="grid">
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
            </div>
            <div class="grid">
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card__header card__header--gamma">
        <div class="card__title">A title</div>
    </div>
    <div class="card__content">
        Some content
    </div>
    <div class="card__action">
        <button class="btn btn--beta btn--medium">action</a>
    </div>
</div>

<div class="card">
    <div class="card__header card__header--gamma" style="background-image: url(http://www.placehold.it/640x480)">
        <div class="card__title">A title</div>
    </div>
    <div class="card__content">
        Some content
    </div>
    <div class="card__action">
        <button class="btn btn--beta btn--medium">action</a>
    </div>
</div>

<div class="dropdown">
    <a class="btn btn--alpha btn--small">dropdown</a>
    <div class="dropdown__content">
        <ul class="dropdown__list">
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
        </ul>
    </div>
</div>

<div class="dropdown" data-dropdown-trigger="click">
    <a class="btn btn--alpha btn--small">dropdown</a>
    <div class="dropdown__content">
        <ul class="dropdown__list">
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
        </ul>
    </div>
</div>

<div class="dropdown dropdown--right">
    <a class="btn btn--alpha btn--small">dropdown</a>
    <div class="dropdown__content">
        <ul class="dropdown__list">
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
            <li class="dropdown__item"><a class="dropdown__link" href="#link">link</a></li>
        </ul>
    </div>
</div>

<div class="grid" data-equalize>
    <div class="column-4">
        <div data-equalize-target class="card">
            <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, beatae, alias? Necessitatibus nulla sint voluptate perspiciatis excepturi, architecto et, incidunt itaque iusto inventore porro! Eum ullam placeat quam, eius aperiam!</div>
        </div>
    </div>
    <div class="column-4">
        <div data-equalize-target class="card">
            <div class="card__content">Lorem ipsum.</div>
        </div>
    </div>
    <div class="column-4">
        <div data-equalize-target class="card">
            <div class="card__content">Lorem ipsum.</div>
        </div>
    </div>
</div>

<div class="grid" data-equalize="betaAndUp">
    <div class="column-4">
        <div data-equalize-target class="card">
            <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, beatae, alias? Necessitatibus nulla sint voluptate perspiciatis excepturi, architecto et, incidunt itaque iusto inventore porro! Eum ullam placeat quam, eius aperiam!</div>
        </div>
    </div>
    <div class="column-4">
        <div data-equalize-target class="card">
            <div class="card__content">Lorem ipsum.</div>
        </div>
    </div>
    <div class="column-4">
        <div data-equalize-target class="card">
            <div class="card__content">Lorem ipsum.</div>
        </div>
    </div>
</div>

<div class="google-maps">
    <div id="google-maps" class="google-maps__map"></div>
</div>

<div class="media media--left">
    <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
    <div class="media__beta">
        <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
        <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
    </div>
</div>

<div class="media media--right">
    <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
    <div class="media__beta">
        <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
        <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
    </div>
</div>

<div class="media media--left">
    <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
    <div class="media__beta">
        <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
        <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
        <div class="media media--left">
            <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
            <div class="media__beta">
                <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
                <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
            </div>
        </div>
        <div class="media media--left">
            <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
            <div class="media__beta">
                <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
                <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
            </div>
        </div>
    </div>
</div>

<ul class="media-list">
    <li class="media media--left">
        <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
        <div class="media__beta">
            <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
            <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
        </div>
    </li>
    <li class="media media--left">
        <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
        <div class="media__beta">
            <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
            <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
        </div>
    </li>
</ul>

<ul class="media-list media-list--bordered">
    <li class="media media--left">
        <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
        <div class="media__beta">
            <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
            <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
        </div>
    </li>
    <li class="media media--left">
        <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
        <div class="media__beta">
            <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
            <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
            <div class="media media--left">
                <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
                <div class="media__beta">
                    <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
                    <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                </div>
            </div>
            <div class="media media--left">
                <div class="media__alpha"><img src="http://placehold.it/400x300/f1f1f1/cfcfcf&text=basos" alt=""></div>
                <div class="media__beta">
                    <h2><a href="#link">You guys realize you live in a sewer, right?</a></h2>
                    <p>Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                </div>
            </div>
        </div>
    </li>
</ul>

<ul class="pricing-table">
    <li class="pricing-table__header">
        Basos package
    </li>
    <li class="pricing-table__content pricing-table__content--alpha">
        <div class="pricing-table__price">&euro; 500,-</div>
    </li>
    <li class="pricing-table__content pricing-table__content--beta">
        <div class="pricing-table__description">Lorem ipsum dolor sit amet.</div>
    </li>
    <li class="pricing-table__content pricing-table__content--beta">
        <div class="pricing-table__item">50 components</div>
    </li>
    <li class="pricing-table__content pricing-table__content--beta">
        <div class="pricing-table__item">100 lorems</div>
    </li>
    <li class="pricing-table__content pricing-table__content--beta">
        <div class="pricing-table__item">5 dolirs</div>
    </li>
    <li class="pricing-table__content pricing-table__content--beta price-table__content--action">
        <a class="btn btn--beta btn--medium" href="">buy now</a>
    </li>
</ul>

<progress>
    <div class="progress-bar">
        <div class="progress-bar__value"></div>
    </div>
</progress>
<div class="progress-bar">
    <div class="progress-bar__value"></div>
</div>

<progress max="100" value="80">
    <div class="progress-bar">
        <div class="progress-bar__value" style="width: 80%;"></div>
    </div>
</progress>
<div class="progress-bar">
    <div class="progress-bar__value" style="width: 80%;"></div>
</div>

<div class="grid">
    <div data-scrollspy data-scrollspy-repeat data-scrollspy-class="animation-bounceIn" class="column-12 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best. Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best. Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>
<div class="grid" data-equalize>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInLeft" class="column-6 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInRight" data-scrollspy-delay="200" class="column-6 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>
<div class="grid" data-equalize>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceIn" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceIn" data-scrollspy-delay="200" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceIn" data-scrollspy-delay="400" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>
<div class="grid" data-equalize>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInLeft" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInRight" data-scrollspy-delay="200" class="column-8 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>
<div class="grid" data-equalize>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-fadeInUp" class="column-7 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-fadeInUp" data-scrollspy-delay="200" class="column-5 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>
<div class="grid" data-equalize>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInLeft" class="column-8 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInLeft" data-scrollspy-delay="200" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>
<div class="grid" data-equalize>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInRight" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInRight" data-scrollspy-delay="100" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-bounceInRight" data-scrollspy-delay="200" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>
<div class="grid" data-equalize>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-fadeInRotateAlpha" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-fadeInRotateGamma" data-scrollspy-delay="200" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
    <div data-equalize-target data-scrollspy data-scrollspy-class="animation-fadeInRotateBeta" data-scrollspy-delay="400" class="column-4 block">Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
</div>

<svg width="20px" height="20px">
    <use xlink:href="assets/dist/img/sprite.svg#ID" />
</svg>

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>

<table class="table table--hover">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>

<table class="table table--zebra">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>

<table class="table table--bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>

<table class="table table--zebra table--bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>

<table class="table responsive-table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
            <th>Yada</th>
            <th>Yada</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
    </tbody>
</table>

<table class="table responsive-table responsive-table--flip">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
            <th>Yada</th>
            <th>Yada</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
            <td>Yada</td>
            <td>Yada</td>
        </tr>
    </tbody>
</table>

<ul class="tabs">
    <li><a class="tab tab--active" href="#tab-home">Home</a></li>
    <li><a class="tab" href="#tab-lorem">Lorem</a></li>
    <li><a class="tab" href="#tab-ipsum">Ipsum</a></li>
</ul>
<div class="tab-content">
    <div class="tab-item tab-item--active" id="tab-home">
        <div class="grid">
            <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
            <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
        </div>
    </div>
    <div class="tab-item" id="tab-lorem">
        <p>Ut pharetra ante id lobortis ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ac sapien vel purus porta hendrerit. Nulla lacinia ac erat id tempor. Donec felis lorem, hendrerit eu placerat condimentum, faucibus sed metus. Nullam rutrum rutrum odio tempus convallis. Integer tempus lacus libero, non suscipit lacus mattis quis. Nam massa risus, scelerisque at libero non, dapibus lacinia neque. Quisque eu nulla at nunc blandit lobortis. Proin viverra metus tellus, non mollis est elementum ac. Proin elit dolor, gravida vel ipsum sit amet, varius aliquam ipsum</p>
    </div>
    <div class="tab-item" id="tab-ipsum">
        <div class="grid">
            <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
            <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
        </div>
        <div class="grid">
            <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
            <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
        </div>
    </div>
</div>