Content Area


2 Column Example

Ex qui voluptas non animi. Deleniti aperiam unde repellat nesciunt aut dolore. Et rerum sint alias.

Beatae qui reiciendis ut occaecati. Illum accusamus qui mollitia ratione nisi ab deserunt aliquam. Qui et totam deserunt aut. Consequatur quod quos vel incidunt.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Voluptate voluptatibus harum doloribus rerum dolores suscipit quam. A nisi vitae maxime ipsa fugiat. Vel quia quo non id. Non vel numquam nobis praesentium magnam eaque ipsa.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Magni id sapiente adipisci nesciunt illo eligendi repellat tenetur. Libero aut sapiente facilis eveniet distinctio dolore et atque. Vitae quod maiores consequuntur in ad assumenda et magni.</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
Van Considine arch32@yahoo.com
Dahlia Yundt lweimann@wisozk.com
Amy Hagenes kautzer.camylle@hotmail.com
Jaycee Lakin randy.weissnat@hotmail.com
Deangelo Lockman padberg.lane@kutch.com
Keaton Thompson tom.treutel@yahoo.com
Kenyon Yost leonard78@gmail.com
Shanelle Bruen nader.theron@hermiston.com
Delores Tromp guido.bednar@johnson.com
Cortney Reynolds ludie66@halvorson.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

Distinctio quia et praesentium ut. Aut sunt nihil est reprehenderit. Dolores illum voluptate ad nihil. Repellat nam id et. Veniam non sit debitis neque. Quo dolores porro officiis. Sed dicta animi eos sint velit non amet.

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: Quidem temporibus saepe harum perferendis voluptas tempore.

H2: Assumenda qui quasi alias ab fugiat iste.

H3: Pariatur dolores sunt natus illo neque eius omnis ut.

H4: Officia quia nam id corrupti omnis ex ratione.

H5: Consequuntur placeat eligendi deserunt laudantium quo iusto repellendus inventore.
H6: Ut ea illum itaque voluptate expedita.

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>