Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Quia ut enim officiis aliquid rem illo. Modi nihil veniam nemo occaecati. Assumenda quaerat rem molestiae officiis iusto reprehenderit molestiae.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Ducimus provident harum nihil laudantium assumenda iste. Earum est at ipsa iure omnis. Qui porro amet placeat quibusdam unde soluta officiis eos.</p>
        </div>
    </div>
        
    

---

Accordion

• Natus impedit asperiores suscipit optio.

  Enim et molestias quia porro repudiandae. Odit non repellat expedita et animi. Repellat modi explicabo recusandae autem.

• Non eum est ratione veritatis.

  Quo sed ad corporis esse culpa quia eum recusandae. Distinctio voluptas laboriosam deleniti eum. Et similique neque et voluptas placeat. Ducimus cupiditate aut nulla dolorem. Asperiores ut necessitatibus eligendi iure ut praesentium.

• Eum eaque non voluptatem ipsam.

  Tenetur omnis accusamus ipsam occaecati earum qui molestiae. Quia et eius labore repellendus omnis corrupti. In saepe architecto laborum recusandae. Sunt rerum error explicabo.

• Quaerat iure veniam nulla adipisci neque fugit saepe.

  Et qui voluptatum dolorum in totam. Aliquid qui quia rerum fuga ea quia. Laborum itaque maiores architecto consequuntur dicta est ut. Ab nisi rerum aspernatur rerum id dolor animi eum.

• Laborum assumenda deserunt delectus dolorem ut ex.

  Minima nihil ad nemo ut. Id quis necessitatibus in aut alias est. Dolorem et reprehenderit est voluptatem accusamus. Enim nobis molestias et enim consequuntur.

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
Sincere	Trantow	ekoss@yahoo.com
Carissa	Hoeger	junius26@schultz.net
Roscoe	White	hwuckert@hotmail.com
Rachel	Heathcote	brenden20@hotmail.com
Miracle	Medhurst	greenholt.adrianna@padberg.com
Humberto	Lueilwitz	rohan.billie@farrell.com
Karley	Satterfield	tiana52@gmail.com
Toby	Bergstrom	effertz.makenzie@swaniawski.com
Jaime	Huel	javonte.anderson@hessel.net
Zelda	Schulist	jast.allene@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

Sapiente laboriosam optio sequi possimus. Qui voluptatem ut delectus est et rerum. Voluptas dolores quam voluptas ratione quis. Aperiam similique perferendis magni rerum quasi quia sed eum. Ut soluta ut aperiam incidunt voluptates animi. Suscipit temporibus placeat velit quidem inventore eaque minus. Ratione occaecati eligendi perferendis assumenda. Sed suscipit totam sint qui. Nihil quia inventore architecto.

---

Buttons

Button Button Expanded See Button Code

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

---

Headers

H1: Assumenda dolores et non et.

H2: Voluptatum ut sed vitae nemo est non perspiciatis vel.

H3: Voluptatem porro at dicta.

H4: Sint quasi consequatur nam est veritatis commodi minima qui.

H5: Ipsam assumenda officiis hic quasi.

H6: Voluptates eveniet enim aut voluptatem eos nesciunt enim.

---

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>