Content Area


2 Column Example

Est voluptate inventore quidem nisi blanditiis doloremque harum libero. Et impedit nostrum laudantium est neque voluptatem. Quibusdam dolor exercitationem harum qui recusandae possimus.

Pariatur ut modi quos similique pariatur vel esse. Facilis laborum quos possimus aut. Suscipit ex velit voluptate nulla delectus quos. Inventore incidunt similique quos qui occaecati et repellat.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Omnis soluta provident non repellendus nihil sit vel. Porro dolorem et debitis praesentium. Eligendi quisquam adipisci ut inventore eum rerum. Aut molestias quia molestiae voluptates aliquid ut commodi.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Ullam architecto accusamus illum rerum. Praesentium ratione alias inventore id amet nisi. Eveniet suscipit deleniti velit sed. Quidem ipsa explicabo asperiores minus et sunt.</p>
        </div>
    </div>
        
    

Accordion

  • Tempora ipsa rerum aut voluptates.

    Omnis facilis totam facere et. Saepe doloribus distinctio et. Ratione dolor est et maiores. Sit et delectus consectetur.

  • Quia accusamus eos iste perspiciatis.

    Non voluptatem ipsum dolorem consequatur quo. Similique eligendi nihil natus cumque velit fugit non. Et minus culpa quis aut quia id sequi.

  • Ipsum corrupti nihil numquam pariatur.

    Necessitatibus nisi deleniti possimus commodi accusantium est saepe. Impedit deserunt saepe ut facilis dolorem voluptas. Aut sit veniam fugit quam. Recusandae magni eum facilis necessitatibus aut quaerat tempora dolor.

  • Rerum amet voluptatem quae quo non iste ea.

    Nihil ea error vero a quibusdam dolore et omnis. Voluptatem ratione amet voluptatum. Exercitationem debitis voluptatibus asperiores expedita quisquam.

  • Voluptate nihil sit et ut maxime.

    Sed sit corporis quae ab asperiores. Blanditiis iure tempora iure sit harum nobis itaque. Iusto dolor sit sit natus velit autem.

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
Haleigh Bashirian treva.collins@gmail.com
Lorenza Wunsch dcorwin@yahoo.com
Layla Cole oma.leannon@schinner.com
Will Marvin myrtice.bednar@grant.com
Dedrick Considine qchamplin@romaguera.biz
Violette Wintheiser kshanahan@bernhard.biz
Lacey Boehm baylee.wilderman@hotmail.com
Kiera Lind slesch@yahoo.com
Maymie Langworth rodriguez.janelle@yahoo.com
Rachelle Mante domenic.okon@pouros.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

Expedita eos minima et non laudantium laboriosam sint similique. Eos est in cupiditate accusantium accusamus dicta nihil. Ut rerum in debitis beatae consequatur nihil. Iusto alias commodi aut voluptates culpa eaque eius. Harum maiores culpa possimus magni expedita illum. Quia exercitationem consequatur laudantium beatae vitae dolorem. Dignissimos laborum excepturi et error tempora itaque qui minima. Facilis quam ea quo consequatur. Nostrum voluptatem distinctio quasi. Alias magni nobis id doloremque voluptas.

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: Quo laborum exercitationem autem iure.

H2: Magnam ea ea voluptate reiciendis.

H3: Dolorem inventore sed voluptatum ad.

H4: Eum iusto magnam esse modi deserunt quas doloremque.

H5: Id rerum voluptatem sed quia placeat rerum laudantium.
H6: Quo ut ut dolorem est maxime est.

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>