Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Praesentium enim unde fugit laboriosam quo. Officia alias qui quo laborum expedita. Voluptas sed ipsam unde eligendi.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Molestiae minus aperiam enim dolor. Voluptatem dolore autem consequatur sint.</p>
        </div>
    </div>
        
    

---

Accordion

• Aliquid officia magni et.

  Voluptas fuga aut et distinctio qui. Cupiditate quidem qui ullam possimus ab distinctio modi dolorem. Est nihil explicabo placeat ut. Debitis placeat libero quo quo quos. Tenetur rem aut quaerat necessitatibus in libero.

• Et expedita quos dolores est suscipit in laudantium sunt.

  Beatae vel sunt unde et quae sapiente ut. Recusandae labore dolores corrupti doloribus et in praesentium.

• Delectus deserunt et dolores impedit doloremque atque et.

  Et quidem non illum fuga minima totam mollitia. Dolorem totam asperiores non blanditiis. Nemo recusandae magni sequi velit. Ab ab voluptas velit reprehenderit id.

• Est rerum laborum quaerat molestias.

  Unde necessitatibus enim ut ullam. Nam necessitatibus enim pariatur sequi. Non ipsum qui odio qui qui odit. Et et vero facilis dolor pariatur corporis est. Ea est cum est.

• At quisquam pariatur consequuntur iste sequi nihil.

  Commodi commodi eum eligendi exercitationem et facilis sed. Soluta consectetur et numquam laudantium exercitationem et. Qui dolorem vitae qui similique et occaecati autem iure. Error occaecati tempora qui a aut ut eos.

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
Carley	Kihn	jada.orn@yahoo.com
Garnet	Feil	aking@yahoo.com
Jace	Runolfsdottir	watsica.maurice@bechtelar.info
Dana	Kilback	lhuels@hodkiewicz.com
Louvenia	Feest	tressie98@yahoo.com
Andy	Raynor	elisa36@parisian.com
Jovani	Lubowitz	helene32@ondricka.com
Kay	Erdman	marguerite94@rosenbaum.org
Rebecca	Mayert	hrunte@gmail.com
Kira	Rosenbaum	mona90@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

Culpa et sequi molestiae corrupti. Inventore omnis maxime occaecati necessitatibus dolores ipsum. Velit illo tempore repudiandae et possimus ullam est qui. Voluptas labore ab voluptas a similique quidem quaerat cupiditate. Quis dolore cupiditate et voluptatem error et est porro. Delectus velit sit iusto unde praesentium aut. Cum ducimus placeat modi non quia aliquam nostrum corrupti. Nulla et consequatur dolores similique. Repellat reprehenderit omnis beatae est. Autem suscipit maiores libero ipsa.

---

Buttons

Button Button Expanded See Button Code

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

---

Headers

H1: Alias modi eos consequatur aliquid similique minima dolorum numquam.

H2: Et quisquam et dicta itaque dolores illo adipisci.

H3: Quasi et dolorem quas voluptatem voluptas quia.

H4: Sint quas est debitis ut qui minus.

H5: Nisi cupiditate animi accusantium qui.

H6: Nisi iusto id nisi.

---

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>