Content Area

---

2 Column Example

See Row/Columns Code

        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Illum expedita est dolorem alias. Consequatur accusantium minima blanditiis rem accusamus recusandae non. Laborum sit nisi non rem est ab.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Vel voluptates eum voluptatum vel dignissimos repellendus. Error repellendus consequatur quas incidunt nisi eum. Alias libero dolores aut et ducimus. Architecto ut sequi nulla non.</p>
        </div>
    </div>
        
    

---

Accordion

• Necessitatibus qui ea eveniet est laboriosam autem.

  Saepe impedit magnam quia ea voluptas et qui eos. Rerum omnis aut deserunt sequi quidem sint quidem. Magni nulla qui quo eum modi et error.

• Iusto sit quia repellendus suscipit beatae eveniet ratione.

  Sint velit doloribus placeat illo beatae enim consectetur. Aliquid voluptatem ea ea magnam nulla explicabo. Occaecati minus non quia sapiente ut dignissimos.

• Iste distinctio voluptatem rem praesentium.

  Et aut id consequuntur accusamus. A consequatur distinctio officiis eum. Laboriosam vero mollitia distinctio nulla. Tempore et aut id eos. Debitis libero illum vel corrupti non.

• Ipsum voluptatum eum eum facere soluta.

  Laudantium in inventore doloremque accusantium at. Qui sunt occaecati fugiat voluptas atque. Ipsum sint molestiae eligendi qui. In omnis modi et.

• Nesciunt saepe quas autem ea officiis est.

  Ab natus iste voluptatem pariatur id quia est. Possimus voluptatem quis dolor rerum. Facere non inventore voluptas totam minus ut sed.

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
Kaylin	McKenzie	rbatz@deckow.net
Cassidy	Prohaska	reinhold26@considine.com
Tyree	Eichmann	carlee.brakus@oberbrunner.com
Sherwood	Batz	kjerde@yahoo.com
Willard	Bruen	bwalsh@torphy.com
Ari	Kiehn	beverly.upton@hotmail.com
Marge	Senger	omurray@sporer.com
Shanny	Schaefer	karen.gulgowski@hotmail.com
Leatha	Stoltenberg	zemlak.mazie@russel.org
Emelia	Hoeger	lemke.samara@cole.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

Eum suscipit adipisci dolorem id odio. Minus qui placeat qui et esse similique iure ut. Eius autem molestiae voluptas corrupti nihil repellat. Quia sit culpa dolores voluptatibus iure qui. Rerum nisi cum id maiores sed. Laudantium voluptatem rem alias quasi incidunt autem eaque. Illo dolores quasi voluptatum necessitatibus facilis dolorem.

---

Buttons

Button Button Expanded See Button Code

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

---

Headers

H1: Similique corporis aut est debitis maxime dicta adipisci.

H2: Ut debitis numquam ratione neque distinctio non architecto enim.

H3: Qui aliquid voluptatum expedita hic officia modi consequatur.

H4: Nam non sint expedita at cum doloremque.

H5: Molestiae dolor earum qui.

H6: Ratione odio qui dolores error et nihil.

---

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>