Content Area


2 Column Example

Eligendi accusamus soluta cupiditate animi reprehenderit maxime. Voluptate in aut qui autem non ut ut. Dolore ipsa illo quasi sit delectus.

Aut excepturi quidem sint sunt magni doloremque. In debitis sit consectetur asperiores asperiores fuga repellendus. Sed ipsam culpa quasi asperiores. Quo fugit quas et et corporis.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Vel tenetur cumque aspernatur aut repudiandae. Itaque voluptatem optio sint dicta quos quo. Officiis quisquam dignissimos nesciunt aspernatur sed iusto ea repellat. Qui doloribus error quos qui quasi. Nihil iusto illum aut qui rem rem est.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Totam voluptas placeat rerum in. Reprehenderit aut dolorem iste similique sint quo dignissimos dolor. Atque voluptatum qui velit in minus est rerum alias. Nihil hic quia aliquam autem repellendus.</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
Layne Green mhilpert@herzog.com
Catalina Schamberger myrtle.wisozk@collier.com
Erin Stracke ohermiston@simonis.com
Charity Towne elliott.legros@brown.com
Kailyn Cummerata veffertz@hoppe.com
Taylor Stanton nschaden@hotmail.com
Lyric McCullough hudson.geoffrey@gmail.com
Ora Hand demetrius64@hotmail.com
Norval Fritsch emmerich.dorcas@stroman.biz
Evan Langworth cary.hudson@hudson.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

Quaerat perferendis ipsum voluptate velit magnam veritatis ducimus. Deserunt magnam nobis ut sit rem aut. Voluptas dolores non inventore. Quis molestiae nihil assumenda quisquam. Voluptatibus ab quae ut aspernatur dolor saepe velit nam. Vel blanditiis harum dolore cum est accusamus. Quaerat earum quis autem similique. Dicta fuga commodi fugiat sed. Sequi nisi laborum nostrum nobis culpa beatae. Nulla adipisci repellat possimus nesciunt facere quia. Quos repellendus consequatur rerum. Iusto qui aliquam ad commodi. Nulla suscipit minima sit earum. Sed accusantium voluptas quo tempore.

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: Cumque consectetur temporibus ut non quia magnam nihil.

H2: Illo possimus ducimus quia neque quis consectetur voluptatum dolorem.

H3: Doloremque sequi voluptatibus nostrum vero molestiae.

H4: Ad eos nobis id ut est tempore dicta.

H5: Error excepturi atque ex rerum.
H6: Aliquam quidem quia error dolore quod est enim harum.

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>