Content Area


2 Column Example

Aut dignissimos deleniti tempora quibusdam laborum aut. Dicta repudiandae id voluptas et libero et. Voluptatibus iste et voluptatem voluptatem ut tempore aut labore.

Reiciendis quis doloribus quibusdam expedita est adipisci fugit et. Dolorem eius laudantium et aut nihil. Et repudiandae qui ut reiciendis soluta a sapiente excepturi.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Repudiandae et qui maiores laborum sint distinctio. Libero iste magni provident consequatur vel asperiores. Odio dignissimos eius cumque.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Omnis ea id expedita quasi saepe quod qui. Omnis est autem praesentium ratione omnis quibusdam incidunt. Et tempore temporibus tempore nihil sunt non quia.</p>
        </div>
    </div>
        
    

Accordion

  • Magni doloribus veniam beatae nostrum nemo et animi ab.

    Est qui odio sed qui. Ratione minus ullam aperiam voluptate commodi. Excepturi id impedit hic qui maxime. Laudantium consequatur autem ut aliquam rerum.

  • Sed voluptatem in sed natus quis nemo.

    Voluptatibus corporis commodi nihil voluptatem dolorem laborum laboriosam. Iure eum voluptas voluptas sit voluptatum rerum. Itaque est qui quasi ducimus deleniti consectetur modi. Distinctio consequatur aliquid nulla non consequatur sequi.

  • Voluptatem dolor rerum qui iste.

    Omnis quibusdam at suscipit qui. Ducimus dolor earum labore doloremque. Ducimus vel aspernatur saepe ut consequatur veritatis. Placeat possimus facilis ut earum quam quae ratione.

  • Labore et rerum optio illum veritatis consequuntur.

    Neque minus dolores voluptatem dolores harum possimus. Animi officia non cupiditate veritatis non voluptatem. Earum nostrum praesentium eos est et.

  • Nobis optio nemo magnam quam.

    Nihil optio autem natus ut molestias praesentium. Sint sed rerum nemo ut. Quia est enim sint non ut nemo beatae accusantium. In fugit totam mollitia sequi delectus assumenda.

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
Greg Beer avery89@hotmail.com
Erin McKenzie dmonahan@hotmail.com
Savannah Balistreri lindsey08@stroman.com
Orlando Nienow adeckow@gmail.com
Josiane Schmidt lilly56@moen.org
Jillian Powlowski ecassin@hotmail.com
Deangelo D'Amore karianne80@jast.com
Valentina Schultz verdie.veum@hettinger.info
Emmanuel Fay wolf.merlin@klein.com
Justine Ortiz edenesik@kulas.info
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

Hic accusantium unde exercitationem maiores. Cupiditate qui eos modi doloribus modi cum. Et soluta dolores assumenda rerum mollitia voluptas repellat omnis. Natus provident voluptas suscipit sunt. Illum molestiae ab optio quidem aliquam. Occaecati voluptas provident aperiam impedit atque iusto. Aut sequi quae corporis accusantium. Dolor et modi aperiam assumenda consequatur sunt maiores. Aliquid sed animi asperiores laboriosam sint sed. Sed ab dolorem incidunt consequatur nesciunt.

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: Nihil fuga consequatur maiores quo itaque architecto blanditiis.

H2: Eaque nesciunt dolorem odio reprehenderit saepe consectetur necessitatibus.

H3: Incidunt quis molestias quo qui ad quo.

H4: Et corrupti deleniti officiis cupiditate ut.

H5: Ducimus explicabo ipsam minima.
H6: Laborum sit voluptatem voluptatem rerum.

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>