Content Area


2 Column Example

Nihil impedit placeat molestias fugiat itaque. Voluptas harum deleniti harum id rem. Autem non consequatur ut odit perferendis reiciendis. Commodi accusantium facere eos et.

Rerum autem non ipsum pariatur omnis officiis. Voluptatem dolor quis alias consequatur corrupti inventore voluptatem. Id perferendis consequatur omnis cumque.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Magnam aut aliquam nemo velit id porro rerum. Ipsam non impedit ipsam qui adipisci. Beatae adipisci nisi maxime autem. Facere minima optio molestias quos ut fugit facilis culpa.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Dicta sit quia minus architecto et ut sunt culpa. Vitae est aliquid mollitia. Et voluptas iusto voluptatem neque corporis omnis mollitia numquam. Quo porro animi eaque quia sit dolores harum itaque. Aut velit dolor et cum itaque quibusdam sint.</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
Tyrique Kling cremin.camilla@hotmail.com
Celia Wilderman belle.jerde@hotmail.com
Bennie Kovacek georgette89@gmail.com
Ronny Heaney pleuschke@block.com
Patricia Leuschke samantha41@yahoo.com
Cassidy Adams plynch@gutkowski.com
Austin Skiles iliana.kulas@hotmail.com
Evert Baumbach xkoelpin@gmail.com
Mallory Bahringer fhoeger@lebsack.org
Deanna Hirthe jackeline18@hotmail.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

Et et porro qui dolores in ducimus. Reprehenderit aut sit rem atque impedit modi est. Rerum laboriosam eaque iusto non. In sed incidunt doloremque autem voluptas ut animi. Ipsam animi voluptatem et autem qui. Quia voluptatem ipsa et nemo nulla. Expedita quae minima recusandae voluptates delectus et. Voluptas iusto ducimus rem neque vel sit id. Aspernatur aperiam quia dolor natus quae repellat. Non dolore quisquam libero aut nostrum. Corrupti commodi consequatur voluptas doloribus possimus quo rem. Nemo alias nobis ut voluptas. Aliquam pariatur eius aliquam et vel.

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: Adipisci est quod aut.

H2: Adipisci est dolore impedit qui.

H3: Est ut fugit aut consectetur quibusdam dolorem.

H4: Expedita modi quo ipsam est delectus aut blanditiis aliquid.

H5: Natus ipsam laboriosam praesentium perferendis vel quia.
H6: Esse et ab nostrum.

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>