Content Area


2 Column Example

Sit amet non deleniti rem perspiciatis. Deserunt expedita aspernatur quis et et vitae eius saepe. Debitis unde necessitatibus sunt ut qui. Sint consectetur sunt incidunt explicabo minus id et.

Autem odio ut dolore omnis. Aliquam repellendus labore nisi voluptatum nisi accusamus aperiam eos. Laudantium voluptatem repellendus voluptatem sit enim qui. Vitae aut ducimus qui adipisci repudiandae.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Cum exercitationem sunt voluptas sequi reprehenderit distinctio qui. Impedit iusto voluptas amet explicabo porro molestiae velit.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Sint est quos eaque ut sit nihil dolore dolor. Rem harum autem ut placeat. Repellat incidunt numquam non voluptate veritatis officiis.</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
Brennon Armstrong lewis.hessel@cole.com
Jackeline Stracke sylvester.lind@heller.org
Bernhard Bruen ewolf@smith.com
Domingo Hagenes edwina87@nienow.com
Beatrice Herzog zcorkery@hilpert.com
Elvera Stoltenberg gust.daniel@oberbrunner.net
Rosendo Kuvalis annalise84@bartell.com
Dora Schamberger lynch.abbie@dicki.com
Isobel Padberg shields.jolie@gmail.com
Leonel Wilderman schuppe.leon@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

Nemo earum ex officiis iste voluptatem. Et sunt ut hic aut nulla nobis harum. Tenetur ab ut impedit asperiores consequatur culpa quia. Tenetur maiores explicabo sequi nostrum exercitationem quisquam explicabo est. Provident omnis eius ut ea. Iure id ea maxime rerum possimus esse vitae. Similique ea et facilis. Ullam recusandae hic rerum molestias et qui at. Numquam vel ut veniam ullam cupiditate fugiat repellendus. Omnis quos unde quia dignissimos dolore libero. Voluptatibus facere perferendis molestiae cupiditate harum officia eos. Qui quae voluptatem sed esse in culpa illo. Vitae nostrum incidunt velit amet soluta quae. Ut consequatur vero eligendi quia quibusdam nisi reiciendis.

Buttons

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

Headers

H1: Harum qui officia rerum eligendi.

H2: Vel est molestiae dolorem dolores.

H3: Natus et labore perspiciatis quas cupiditate a cupiditate mollitia.

H4: Maxime impedit quia non autem pariatur dolorem alias.

H5: Veritatis officia consequatur et et eum eveniet.
H6: Commodi mollitia et neque aperiam in.

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>