Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Quo iste qui perferendis consequatur qui eos velit. Exercitationem sunt sint accusamus molestiae aliquid. Qui cupiditate ipsum provident eum et impedit et. Quibusdam temporibus officiis est sunt in.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Laudantium mollitia natus porro quod excepturi. Quasi culpa mollitia quis et. Mollitia explicabo aut reprehenderit. Error maxime similique iure tempore suscipit sunt. Natus dolore architecto veritatis sit.</p>
        </div>
    </div>
        
    

---

Accordion

• Quae sapiente repudiandae et quia.

  Nisi similique vel ab et quasi. Quae omnis enim earum in. Aut in facere magni occaecati esse qui nisi quaerat. Veritatis doloribus distinctio assumenda explicabo.

• Odio nisi asperiores dolorum occaecati.

  Facere rerum molestiae id sed odit aut minima. Fugit veniam est possimus facilis occaecati cumque fugit soluta. Magni quia nemo velit veritatis dolore veniam facere. Dolorum voluptatem dolore maiores et esse aspernatur.

• Quis mollitia aliquam dolorem perspiciatis exercitationem impedit sed.

  Qui tenetur aut modi libero est. Quia animi quidem in quos. Laudantium aut ducimus omnis nemo.

• Atque enim aut molestiae possimus totam nesciunt.

  Est in dolore repudiandae ducimus enim cumque. Eum rerum omnis accusamus qui. Reprehenderit hic dolor quod aut doloremque. Quo eveniet aliquid in omnis autem recusandae.

• Non similique quis et asperiores ipsa.

  Omnis dolorem sequi recusandae natus consequatur ut. At est sit voluptas repudiandae sed sed et. Atque perspiciatis unde sequi eos. Dolores totam harum libero atque dolores quam expedita. Ex molestiae quae et sint odit ducimus.

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
Daniela	Reichert	lhills@harvey.net
Holden	Rolfson	marion09@hotmail.com
Susana	Feest	stanley73@lubowitz.org
Harrison	Kiehn	bins.kallie@wuckert.com
Deanna	Pagac	janessa.aufderhar@hessel.org
Edwina	Bednar	deja.toy@yahoo.com
Aurelio	Brekke	tillman.marshall@treutel.com
Kailyn	Kozey	xcummings@muller.com
Maude	Carter	lorenz.gleichner@gmail.com
Evangeline	Koepp	ruben51@von.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

Enim saepe et amet corporis et id et. Itaque autem ut quo facilis accusantium ut iure. Aliquam libero nulla dolorum aut aliquam autem. Quis sed omnis excepturi et facilis tempore. Aut consequuntur ut dolor quia autem itaque. Voluptatem excepturi in eum et. Soluta vitae sunt iusto dolorum. Possimus ab dolorem corporis. Aut ullam aspernatur aut sit nihil. Dolorem tempore totam corrupti ipsa corporis cum officia perspiciatis. Cupiditate fugiat culpa adipisci necessitatibus adipisci et.

---

Buttons

Button Button Expanded See Button Code

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

---

Headers

H1: Reiciendis impedit dolor inventore accusamus veniam cumque.

H2: Ad velit omnis eius sit ipsam voluptas atque.

H3: Voluptatem totam repudiandae atque voluptate omnis assumenda veniam.

H4: Quaerat quidem molestiae quam labore.

H5: Dolorem inventore esse aut.

H6: In earum et quo pariatur dolores omnis officia blanditiis.

---

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>