Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Labore labore eum nesciunt a. Libero consectetur in ipsum atque error. Maiores libero modi dolorem nam non nesciunt. Sit dolorem aspernatur optio dolor totam fuga. Modi numquam repellat quia et id odit.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Eius rerum veniam molestiae sit consequatur. Occaecati distinctio illum et modi dolores beatae eos. Earum illum nihil sit non sit tenetur impedit. Asperiores nesciunt quia sunt qui voluptas assumenda quibusdam.</p>
        </div>
    </div>
        
    

---

Accordion

• Veniam eos quia nihil.

  Iure beatae quas omnis. Dolor sit quia consequuntur ut consequatur vel rem. Reiciendis ut fugit et. Minima qui asperiores ad quidem eligendi libero. Libero aperiam necessitatibus blanditiis.

• Dolorem cumque enim expedita dicta illum.

  Quia vero ratione voluptatem. Ut mollitia omnis omnis ut facilis sed. Odio et pariatur qui harum. Iure est non itaque harum occaecati.

• Voluptas eius sunt ut labore reiciendis.

  Est et nisi quia aut totam. Voluptatem alias sit tenetur quae vero dolor. Eos voluptas sit cumque eos. Dolore molestiae amet modi rerum nihil sint nostrum voluptate.

• Id sed veniam sed est perspiciatis.

  Quisquam praesentium quibusdam accusantium porro voluptatem voluptatem sint. Aut ducimus dolor ducimus nisi laudantium non nobis. Nam ipsa adipisci voluptatem.

• Ut eaque ea necessitatibus voluptatem ad.

  Reiciendis et perferendis consequatur occaecati. Velit dolorum maxime accusantium autem tempora quo amet. Aut aliquid doloribus nesciunt. Eligendi laboriosam explicabo rerum. Quasi quam dolores illo aspernatur.

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
Harrison	Schiller	florine.orn@farrell.info
Abigayle	Littel	walter.lamont@anderson.biz
Eugene	McCullough	stuart.bartoletti@wiza.org
Jaylen	Schamberger	rafael11@yahoo.com
Josiah	Streich	lemuel.roberts@hand.net
Barbara	Mills	uhettinger@hotmail.com
Pasquale	Sporer	hbreitenberg@steuber.com
Blaise	Bahringer	gretchen.dicki@gmail.com
Eino	Bartell	fschaden@kub.net
Christophe	Kessler	thoppe@schaden.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

Eos non reiciendis placeat qui veritatis sed ipsam. Velit eos amet ea dicta aut quo natus sunt. Quod dolorum blanditiis et quasi. Repudiandae nihil dolor numquam veniam unde. Eligendi recusandae natus cumque sunt quibusdam error fuga. Voluptatem asperiores deserunt voluptate doloremque. Tempore possimus nihil odit eligendi ut ea non. Blanditiis dolor reprehenderit corrupti id qui velit. Soluta nulla neque doloremque id nostrum. Molestiae et perferendis saepe. Dolorem voluptatum tenetur quaerat eaque qui quasi qui. Itaque est aspernatur id est dolorem. Veniam voluptas assumenda suscipit.

---

Buttons

Button Button Expanded See Button Code

    
<a href="#" class="button">Button</a>
<a href="#" class="button expanded">Button Expanded</a>
    
    

---

Headers

H1: Magnam et voluptatibus quo omnis dolorem mollitia earum.

H2: Ut saepe ut error quo est.

H3: Fugiat consequuntur alias natus amet.

H4: Iure quia explicabo quidem eos.

H5: Quidem at soluta et quasi quisquam.

H6: Consequatur qui perferendis ut dolores debitis inventore.

---

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>