Content Area


2 Column Example

Et quis error dolores. Reprehenderit ratione distinctio minima non. Reiciendis sapiente molestiae enim qui rerum rerum ut. Eveniet perferendis enim voluptatem ut.

Debitis aperiam pariatur eos. Cupiditate qui deserunt numquam velit.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Dolor voluptatem ut numquam est quod omnis vitae voluptatibus. Est sunt porro culpa. Odit ab et aut repellendus provident suscipit. Nihil expedita deleniti consequatur itaque illo. Fugit ut dignissimos voluptatem minus harum ut.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Neque quaerat totam est perspiciatis occaecati. Unde vel eum quia perspiciatis. Perspiciatis temporibus officia quod similique. Voluptatibus quos at delectus ea et consequuntur.</p>
        </div>
    </div>
        
    

Accordion

See Accordion Code
    
<ul class="accordion">
    <li class="is-active">
        <a href="#panel1a">Accordion 1</a>
        <div id="panel1a">
            <p>Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a href="#panel2a">Accordion 2</a>
        <div id="panel2a">
            <p>Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a href="#panel3a">Accordion 3</a>
        <div id="panel3a">
            <p>Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
</ul>
    
    

Table Stack

First Name Last Name Email
Clarabelle Bechtelar alan51@gmail.com
Cielo Abbott zledner@olson.com
Mabel VonRueden charris@yahoo.com
Katrine Crist jeremy73@gmail.com
Vella Considine ramiro.carter@beer.biz
Ramiro Rogahn pansy.parker@glover.com
Eliane Cole barton08@marks.com
Curtis Rolfson warren.block@yahoo.com
Modesto Emmerich lmoore@schulist.org
Vaughn O'Conner keeley.durgan@frami.com
See Table Code
    
<table class="table-stack">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr valign="top">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
    
    

Blockquote

Ipsum maxime qui quaerat numquam ipsa voluptatibus cumque. Labore qui sint mollitia facilis consequatur consequuntur vel ipsa. Earum tempore assumenda nulla. Illum accusamus quia libero odit nisi sit nihil est. Similique ducimus et qui natus. Et sit ut atque. Maiores beatae dolor eum aliquam at. Est ex rerum dolores aperiam illo accusamus. Distinctio exercitationem suscipit corrupti officiis nisi nam cupiditate. Occaecati accusamus corrupti ullam tempore quia. Consequatur adipisci repellendus optio enim enim quia id ut. Deserunt placeat quidem vitae cum corporis incidunt.

Buttons

Standard Button Expanded Button See Button Code
    
<a href="http://foundation.zurb.com/sites/docs/button.html#basics" class="button">Standard Button</a>
<a href="http://foundation.zurb.com/sites/docs/button.html#sizing" class="button expanded">Expanded Button</a>
    
    

Headers

H1: Sunt animi veritatis optio delectus repudiandae.

H2: Aut sunt minima sed qui magni.

H3: Qui illum qui eveniet.

H4: Voluptas excepturi in vitae dolor sint blanditiis aut.

H5: Alias architecto facilis aliquid et.
H6: Velit voluptas quidem veniam non.

Maginific Pop-up

Any valid YouTube URL starting with youtu.be or youtube.com/watch will open a lightbox with the video.

View YouTube Video

See Maginific Pop-up Code
    
<p>
    <a href="//www.youtube.com/watch?v=guRgefesPXE">
        <img src="//i.wayne.edu/youtube/guRgefesPXE">
    </a>
</p>
    
    

Responsive Embed

To make sure embedded content maintains its aspect ratio as the width of the screen changes, wrap the iframe, object, embed, or video in a container with the .responsive-embed class.

See Responsive Embed Code
    
<div class="responsive-embed">
    <iframe width="420" height="315" src="//www.youtube.com/embed/guRgefesPXE" frameborder="0" allowfullscreen></iframe>
</div>