Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Nihil est velit libero nemo repudiandae velit in. Culpa nobis error cupiditate quod fugiat eos. Ut sapiente velit dolore qui enim similique. Modi aliquam distinctio nostrum quia quos nesciunt illum porro.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Fugit rerum ipsum eum quasi voluptatibus non. Pariatur nisi voluptate aut et.</p>
        </div>
    </div>
        
    

---

Accordion

• Ut delectus eveniet voluptatem numquam veritatis.

  Occaecati quisquam autem voluptatem sit voluptate. Reprehenderit enim doloremque sint rerum ut sint inventore tempora. Quam dolorem ut quo repudiandae sit. Dolores harum qui molestiae et beatae. Nobis quam assumenda quia quaerat sed corrupti quidem non.

• At perspiciatis eum distinctio praesentium qui.

  In tempore facilis ut in. Quia praesentium vel perspiciatis et mollitia. Voluptatem vitae ullam culpa odio. Est molestiae cumque nisi eaque non.

• Dicta totam enim laudantium rerum laudantium dignissimos nemo.

  Aut sed est omnis velit ratione sed dolore architecto. Aliquam iure quia omnis sed.

• Suscipit molestias odio temporibus aut delectus rerum.

  Aut qui aut enim blanditiis ut itaque repudiandae. Laudantium ut voluptatum temporibus qui cum et. Molestias earum quidem sapiente at eligendi quia sit. Deserunt ducimus sed quo sint fugit voluptatibus eos numquam.

• Quas quia suscipit perferendis sed.

  Assumenda voluptatem dicta est alias omnis ad atque maiores. Cum est est eligendi eveniet quo ex quisquam. Consequatur ipsum expedita odio quis nisi. Laboriosam quaerat blanditiis eligendi sint magnam ut asperiores.

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
Helga	Hintz	vandervort.dawn@towne.com
Vicky	Shanahan	auer.norma@roberts.com
Raymond	Hermann	fadel.willie@yahoo.com
Russel	Gutmann	dicki.kay@hotmail.com
Taya	Donnelly	kunde.jettie@yahoo.com
Darryl	Wehner	christophe.bergstrom@kunze.org
Maci	Stark	elton16@gmail.com
Kaylee	Luettgen	olen.dubuque@berge.info
Estrella	Fisher	gerald.senger@jenkins.info
Coralie	McCullough	mills.burley@mclaughlin.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

Aliquam debitis sed eum est tempore quod. Ab repellat ducimus aspernatur molestiae. Magnam ad eveniet dolorem consequuntur expedita deleniti optio. Exercitationem animi nihil et temporibus incidunt voluptatibus. Omnis ea laudantium laboriosam nesciunt quaerat. Error incidunt quae excepturi rem aut sit voluptatem. Quae ea assumenda vel reiciendis totam. Et sed ratione recusandae quasi. Praesentium voluptatum tempora perspiciatis saepe debitis eligendi sunt.

---

Buttons

Button Button Expanded See Button Code

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

---

Headers

H1: Sit cumque et nihil sit saepe assumenda.

H2: Libero minima praesentium quis officia sed odit.

H3: Non esse qui sapiente est.

H4: Distinctio quibusdam sunt provident facilis nihil rerum in.

H5: Eveniet beatae reiciendis dolorem sed delectus quisquam.

H6: Quasi sunt magnam quibusdam occaecati quos illum.

---

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>