Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Cum exercitationem sunt voluptas sequi reprehenderit distinctio qui. Impedit iusto voluptas amet explicabo porro molestiae velit.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Sint est quos eaque ut sit nihil dolore dolor. Rem harum autem ut placeat. Repellat incidunt numquam non voluptate veritatis officiis.</p>
        </div>
    </div>
        
    

---

Accordion

• Quam nam labore numquam quos illo.

  Earum et quia placeat atque quidem rerum ut. Non rerum laborum eos nisi ad. Illum hic est nostrum voluptate.

• Laudantium labore impedit explicabo reiciendis labore.

  Nostrum eveniet ut sed quae. Eaque ipsam sapiente ipsa. Sed autem quidem dolores a totam officiis aliquid. Non voluptatum tempora suscipit.

• Delectus modi sed numquam eius et.

  Sint quasi illo velit nihil error error. Voluptatem dolore voluptatibus labore. Omnis perspiciatis aut delectus iste.

• Facere facilis ducimus aut consequatur asperiores.

  Eos nostrum cumque quam aut quam est et. Exercitationem nostrum qui nostrum autem. Aperiam voluptas harum consequatur est odio quam. Harum aut non molestiae deserunt nemo minima necessitatibus. Nobis qui doloremque ut perspiciatis accusantium rerum.

• Quasi laboriosam sit repudiandae magnam autem magnam delectus.

  Dolores fugit praesentium totam quo beatae alias veritatis. Ipsum quo veniam impedit alias non commodi. Et sunt quis temporibus.

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
Brennon	Armstrong	lewis.hessel@cole.com
Jackeline	Stracke	sylvester.lind@heller.org
Bernhard	Bruen	ewolf@smith.com
Domingo	Hagenes	edwina87@nienow.com
Beatrice	Herzog	zcorkery@hilpert.com
Elvera	Stoltenberg	gust.daniel@oberbrunner.net
Rosendo	Kuvalis	annalise84@bartell.com
Dora	Schamberger	lynch.abbie@dicki.com
Isobel	Padberg	shields.jolie@gmail.com
Leonel	Wilderman	schuppe.leon@hotmail.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

Nemo earum ex officiis iste voluptatem. Et sunt ut hic aut nulla nobis harum. Tenetur ab ut impedit asperiores consequatur culpa quia. Tenetur maiores explicabo sequi nostrum exercitationem quisquam explicabo est. Provident omnis eius ut ea. Iure id ea maxime rerum possimus esse vitae. Similique ea et facilis. Ullam recusandae hic rerum molestias et qui at. Numquam vel ut veniam ullam cupiditate fugiat repellendus. Omnis quos unde quia dignissimos dolore libero. Voluptatibus facere perferendis molestiae cupiditate harum officia eos. Qui quae voluptatem sed esse in culpa illo. Vitae nostrum incidunt velit amet soluta quae. Ut consequatur vero eligendi quia quibusdam nisi reiciendis.

---

Buttons

Button Button Expanded See Button Code

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

---

Headers

H1: Harum qui officia rerum eligendi.

H2: Vel est molestiae dolorem dolores.

H3: Natus et labore perspiciatis quas cupiditate a cupiditate mollitia.

H4: Maxime impedit quia non autem pariatur dolorem alias.

H5: Veritatis officia consequatur et et eum eveniet.

H6: Commodi mollitia et neque aperiam in.

---

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>