Content Area

---

2 Column Example

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

• Earum suscipit recusandae voluptatem debitis facere harum voluptatem.

  In quia natus ea eos ut. Sed nobis ipsam consequuntur officia sunt in fuga. Omnis eligendi omnis soluta est sit. Veniam enim quisquam aut est dolorem.

• Provident aut aliquid sint harum.

  Illum aut quis dolores. Atque eum voluptas nihil totam. Et vel sit aut.

• Assumenda et aut incidunt.

  Natus qui facere quibusdam temporibus eos est voluptatem. Aut et iure magnam vel velit. Iusto a voluptatibus itaque aut et saepe. Consequatur dolorem dolorem rerum vitae. Sint iusto dolor qui iure.

• Aperiam voluptas quia et laborum suscipit.

  Magni nulla est consequuntur excepturi vel exercitationem. Velit enim molestiae aliquam nulla cupiditate aperiam doloribus cumque. Dignissimos dolorum suscipit non ipsam ut hic. Asperiores aut dolor nihil ut dolor quia.

• Libero error aut architecto dolorum nemo.

  Maiores quidem rerum labore. Maiores officiis quis dolores placeat. Omnis dolorum est soluta eum. Dolor corporis unde id.

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.

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>