Content Area


2 Column Example

Et consequuntur possimus consequatur ab iusto. Est non odit aut ut non debitis. Id ipsa ipsa quisquam occaecati ut est. In aliquid sunt et non.

Laborum perspiciatis quidem et tempora ut aliquid. Ut dolor ea natus asperiores provident. Mollitia aliquam veritatis laborum eveniet aut. Rerum quo repellat similique autem magnam vero est.

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

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>