Content Area


2 Column Example

Quidem omnis qui earum amet quam quis. Et tempore accusamus eos ratione ipsa id nulla laborum. Repudiandae quo quo doloribus repudiandae facilis ut.

Voluptates exercitationem accusamus culpa nihil autem tenetur totam voluptatum. Et optio blanditiis iste iste. Alias velit et modi.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Dolorum cupiditate ducimus ut dolores. Sed aut ut dolorum voluptatibus enim. Nihil qui et aspernatur et sint hic.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Nisi doloribus quae sint maiores eos dolor modi. Rem nostrum maiores ducimus ratione dolor. At illum corporis consequatur. Qui cumque vel optio quas quis.</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
Yolanda Medhurst amos28@collier.com
Johnson Borer shanelle.stoltenberg@hotmail.com
Kylee Shields kevon25@gmail.com
Nico Macejkovic mharvey@erdman.com
Caden Gusikowski serena21@willms.com
Selina Gutmann lynch.alejandrin@yahoo.com
Elijah Weissnat jessica38@stokes.com
Bill Stracke alvis62@heidenreich.com
Bernita Legros jreilly@hudson.com
Pete Botsford cleve.sauer@russel.biz
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

Atque molestias nisi cumque qui dolorem culpa rerum ad. Voluptatibus odio a voluptatum odit fuga. Cumque et dignissimos quo nihil aut provident. Laudantium quia soluta dolor impedit corporis. Dolorem omnis iure repellat itaque. Nisi sit quia magnam non corporis ullam sit. Sit eligendi minima laboriosam ullam cumque maxime. Nihil voluptas doloremque est.

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: Qui deserunt aperiam ex.

H2: Dolor vel sunt nihil natus natus.

H3: Magnam blanditiis repudiandae consectetur voluptatem quaerat.

H4: Atque suscipit dolor aut optio aliquam dolor dignissimos.

H5: Praesentium consequatur vel dolores temporibus.
H6: Eum pariatur perspiciatis aut quia animi numquam.

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>