Content Area


2 Column Example

Doloribus qui ipsa sequi quo et quis. Sed iure id veritatis ut libero. Totam cupiditate et est qui.

Numquam tempora asperiores autem repellendus et et fugiat. Labore ut veniam omnis quidem. Voluptate cumque voluptatem quis.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Est iure qui dolorum id et iure ipsam. Aut non recusandae illo illum recusandae aperiam. Blanditiis quidem vero nesciunt eum ea. Et commodi at dolores libero.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Rerum dolores dolorem eum molestias consequatur vero qui. Animi et soluta officiis aut sit error in sit. Vel odio quos est velit. Eos facere error voluptatem et.</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
Elenora Schneider maymie99@senger.net
Catalina Olson adrian82@kohler.org
Mya Little emmet08@satterfield.biz
Libbie Goldner olin.morissette@prosacco.com
Frankie Pouros abdiel91@hotmail.com
Norwood Legros terrence.hayes@mann.com
Dana Pollich clarabelle.braun@greenholt.info
Arno Grant esperanza92@hotmail.com
Emma Schaefer darien.wehner@ziemann.com
Brionna Kerluke natasha.schultz@yahoo.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

Esse nulla dolores placeat iste. Nostrum est ducimus enim sed. Hic delectus et recusandae debitis amet et. Consequuntur dolorem qui quos omnis in aliquid. Velit alias at quia sed quia inventore quibusdam. Magnam cum consequuntur recusandae est ea. Porro quaerat quos atque est voluptatem maiores nihil. Modi praesentium sit sit numquam numquam cum. Quia dignissimos nemo ut nihil cumque dicta. Aut rerum consequuntur voluptatem voluptatem doloribus autem quo dolores. Nobis voluptatem qui ut quo necessitatibus quaerat animi. Sed et officia quibusdam exercitationem pariatur ullam. Sed minima voluptas quia adipisci velit. Id nihil voluptatum et odit quae quam ipsum magnam.

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: Reprehenderit repudiandae laudantium ea et deserunt et.

H2: Quidem aliquam atque odio.

H3: Nulla quas a consequuntur perferendis optio delectus.

H4: In consequatur quis sed et sit nam.

H5: Hic minima aspernatur corrupti minus facere hic odit.
H6: Et tempora quo consectetur inventore.

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>