Content Area


2 Column Example

Quia a magni optio fuga. Et porro fugiat veniam beatae. Excepturi quia sint earum voluptas.

Et tempore asperiores quasi ut ullam in. Alias non eum possimus voluptatem. Sed eos nam debitis officiis rerum repudiandae. Voluptas dolorem et autem eos.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Fuga aspernatur recusandae aperiam non provident. Quis rem saepe atque cumque sunt. Enim molestiae nobis iusto.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Quia at debitis eligendi blanditiis quae id. Placeat libero incidunt vero velit tempora molestiae. Odit soluta sed velit aperiam repudiandae.</p>
        </div>
    </div>
        
    

Accordion

  • Error aut laborum ducimus sint aut voluptatem.

    Recusandae adipisci amet accusamus accusamus non. Odio nemo voluptas aliquam. Et soluta in consequatur esse. Quo laboriosam ipsa ad doloribus.

  • Est dignissimos voluptatem est aut quia labore.

    Molestiae rerum ab harum magni quo magnam. Tenetur accusantium at illum pariatur. Impedit explicabo itaque possimus commodi sunt consectetur fugiat.

  • Deserunt enim fuga optio id et et.

    Et minima eos fugit aut aspernatur quae. Fugit soluta voluptas inventore deleniti. Necessitatibus ducimus et totam reprehenderit et voluptatibus quis. Cupiditate error est aliquam et porro totam id aliquam.

  • Ea non sapiente qui quibusdam fugit.

    Rem dolor ut rerum nulla numquam id possimus. Fuga quae eaque atque non et tempore unde consequatur. Dolorum aut aut rerum voluptatem enim nihil molestias. Velit voluptate est et perspiciatis explicabo voluptas aliquam.

  • Dolorem architecto eum quos pariatur quod vero eaque.

    Nihil saepe minima quia nemo repellendus doloremque. Soluta quia delectus natus qui id. Ducimus possimus deserunt perferendis. Et maiores eum quae ipsam natus sint.

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
Anita Champlin hilda.mueller@gmail.com
Van Block garett78@yahoo.com
Keenan Ryan magali19@hotmail.com
Jamaal Thiel hillary31@bradtke.com
Jimmy Walker kayla.lakin@quigley.com
Ryan Prohaska lesch.orpha@yahoo.com
Ryleigh Tremblay giovani77@windler.com
Kali Stehr ernestine17@jacobson.com
Felicity Kiehn jacobson.eulah@hotmail.com
Eloy Mayer marty20@kemmer.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

Quis voluptatem deleniti laudantium ut earum occaecati odit. Aliquam dicta facilis nisi voluptatem alias facilis. Sit voluptas qui exercitationem illo magni dolore eum. Aut ut animi sit eaque dolores optio. Labore non quas pariatur. Consequatur est facilis asperiores dolor officia hic quos. Molestiae numquam porro dignissimos quis possimus mollitia. Soluta explicabo dolore dolore velit. Voluptates qui iusto asperiores eveniet quasi molestiae.

Buttons

Standard Button Expanded Button See Button Code
    
<a href="http://foundation.zurb.com/sites/docs/button.html#basics" class="button">Standard Button</a>
<a href="http://foundation.zurb.com/sites/docs/button.html#sizing" class="button expanded">Expanded Button</a>
    
    

Headers

H1: Dolorum praesentium quae accusamus nihil labore necessitatibus sapiente quia.

H2: Similique qui iste reprehenderit quibusdam voluptates quia vel.

H3: Nihil asperiores perspiciatis laborum assumenda minima quas modi iure.

H4: Sequi pariatur voluptatem nihil et reprehenderit.

H5: Quisquam officia velit provident ut.
H6: Qui eveniet aliquid autem corrupti nihil.

Links that should not pick up SPF JS


Maginific Pop-up

Any valid YouTube URL starting with youtu.be or youtube.com/watch will open a lightbox with the video.

View YouTube 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>