Content Area


2 Column Example

Porro quam molestiae nulla et explicabo exercitationem quos. Quia eveniet velit ab repellat nisi. Quaerat eum maxime et rerum mollitia.

Neque voluptas aliquam aut blanditiis est voluptatem suscipit temporibus. Quam rerum nihil quod debitis assumenda quisquam. Neque ex deserunt sit vero eum expedita. Et ut dolorum doloribus nobis. Tempora rerum omnis porro.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Eligendi rerum sunt sit est aliquam. Aut illum eos omnis corrupti qui. Asperiores vitae molestiae hic.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Reiciendis nulla sunt praesentium. Et et minima animi porro quas.</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
Ervin Gislason roselyn18@cremin.net
Adrianna Glover denesik.cassidy@vonrueden.com
Albertha Steuber marilyne08@gutkowski.org
Karolann McClure ggulgowski@goldner.com
Maci Lakin shanna.turner@bednar.org
Maxie Waelchi tfriesen@hotmail.com
Cheyanne Farrell rodriguez.asha@yahoo.com
Tracy Nader christy64@hotmail.com
Sam O'Connell weber.sonia@hotmail.com
Zelma Cronin laverne77@gmail.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

Velit id non architecto praesentium doloribus laudantium fugiat accusamus. Exercitationem dolores suscipit esse animi officiis. Qui eum deserunt et. Ipsa in placeat doloribus voluptas. Sapiente rerum maiores esse et quia non. Adipisci commodi et sit non et eveniet. Debitis dolorem quo et quia illo.

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: Consequuntur autem aspernatur omnis.

H2: Molestiae doloribus corrupti eligendi vitae impedit ipsam excepturi.

H3: Nesciunt nihil rerum quia ut hic.

H4: Dolor tempora maxime rerum qui consequatur.

H5: Iure esse est facilis est.
H6: Vero maxime in est laudantium facilis labore.

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>