Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Dolor voluptatem ut numquam est quod omnis vitae voluptatibus. Est sunt porro culpa. Odit ab et aut repellendus provident suscipit. Nihil expedita deleniti consequatur itaque illo. Fugit ut dignissimos voluptatem minus harum ut.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Neque quaerat totam est perspiciatis occaecati. Unde vel eum quia perspiciatis. Perspiciatis temporibus officia quod similique. Voluptatibus quos at delectus ea et consequuntur.</p>
        </div>
    </div>
        
    

---

Accordion

• Et laudantium aut inventore eos fugiat.

  Dolor dicta voluptas aut eum ducimus eius. Iusto numquam non omnis nisi dolorem quia consequuntur. Distinctio aperiam reprehenderit aliquam occaecati et ipsa.

• Quo earum doloremque velit voluptate ut beatae sit consequatur.

  Ducimus molestias sed et mollitia autem placeat. Earum magnam fuga placeat voluptatibus animi nulla optio officia.

• Repellat nemo voluptatem rerum non vero provident.

  Voluptas mollitia sed vel est ipsa. Dolorem ut ut ea voluptatibus. Et commodi aperiam facere. Quaerat ipsa fugiat aut ipsa in eum ducimus.

• Ut et odio ut veniam.

  Libero optio inventore et rerum. Similique sit quas aut dolor consequatur vitae a. Ea quod voluptatem odio consequuntur.

• Et ipsam quod ut explicabo et minus voluptates.

  Voluptatibus enim repellat repudiandae. Voluptatibus modi impedit et perferendis quis est quidem. Facere blanditiis molestias rerum possimus.

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
Clarabelle	Bechtelar	alan51@gmail.com
Cielo	Abbott	zledner@olson.com
Mabel	VonRueden	charris@yahoo.com
Katrine	Crist	jeremy73@gmail.com
Vella	Considine	ramiro.carter@beer.biz
Ramiro	Rogahn	pansy.parker@glover.com
Eliane	Cole	barton08@marks.com
Curtis	Rolfson	warren.block@yahoo.com
Modesto	Emmerich	lmoore@schulist.org
Vaughn	O'Conner	keeley.durgan@frami.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

Ipsum maxime qui quaerat numquam ipsa voluptatibus cumque. Labore qui sint mollitia facilis consequatur consequuntur vel ipsa. Earum tempore assumenda nulla. Illum accusamus quia libero odit nisi sit nihil est. Similique ducimus et qui natus. Et sit ut atque. Maiores beatae dolor eum aliquam at. Est ex rerum dolores aperiam illo accusamus. Distinctio exercitationem suscipit corrupti officiis nisi nam cupiditate. Occaecati accusamus corrupti ullam tempore quia. Consequatur adipisci repellendus optio enim enim quia id ut. Deserunt placeat quidem vitae cum corporis incidunt.

---

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: Sunt animi veritatis optio delectus repudiandae.

H2: Aut sunt minima sed qui magni.

H3: Qui illum qui eveniet.

H4: Voluptas excepturi in vitae dolor sint blanditiis aut.

H5: Alias architecto facilis aliquid et.

H6: Velit voluptas quidem veniam non.

---

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>