Content Area


2 Column Example

Accusamus et voluptas quia et. Saepe hic est labore aspernatur quod consequatur repellat. Commodi sint qui exercitationem labore.

Iusto officia esse in fugiat aut reiciendis eius. Expedita exercitationem doloribus ipsum. Ad velit quod sapiente quia. Adipisci dolore ea deleniti quae accusantium natus ea.

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

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>