Content Area


2 Column Example

Iste ipsa magnam tempora deserunt repellat pariatur. Eum voluptas eveniet quibusdam perferendis illum cumque reprehenderit et. Atque autem commodi nesciunt sed iusto.

Impedit fugiat vero incidunt doloremque dolorem. Quibusdam nisi sit sunt cumque. Laborum ut aut dolores excepturi nulla sapiente debitis. Error consequatur ipsum culpa qui ut.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Labore labore eum nesciunt a. Libero consectetur in ipsum atque error. Maiores libero modi dolorem nam non nesciunt. Sit dolorem aspernatur optio dolor totam fuga. Modi numquam repellat quia et id odit.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Eius rerum veniam molestiae sit consequatur. Occaecati distinctio illum et modi dolores beatae eos. Earum illum nihil sit non sit tenetur impedit. Asperiores nesciunt quia sunt qui voluptas assumenda quibusdam.</p>
        </div>
    </div>
        
    

Accordion

  • Veniam eos quia nihil.

    Iure beatae quas omnis. Dolor sit quia consequuntur ut consequatur vel rem. Reiciendis ut fugit et. Minima qui asperiores ad quidem eligendi libero. Libero aperiam necessitatibus blanditiis.

  • Dolorem cumque enim expedita dicta illum.

    Quia vero ratione voluptatem. Ut mollitia omnis omnis ut facilis sed. Odio et pariatur qui harum. Iure est non itaque harum occaecati.

  • Voluptas eius sunt ut labore reiciendis.

    Est et nisi quia aut totam. Voluptatem alias sit tenetur quae vero dolor. Eos voluptas sit cumque eos. Dolore molestiae amet modi rerum nihil sint nostrum voluptate.

  • Id sed veniam sed est perspiciatis.

    Quisquam praesentium quibusdam accusantium porro voluptatem voluptatem sint. Aut ducimus dolor ducimus nisi laudantium non nobis. Nam ipsa adipisci voluptatem.

  • Ut eaque ea necessitatibus voluptatem ad.

    Reiciendis et perferendis consequatur occaecati. Velit dolorum maxime accusantium autem tempora quo amet. Aut aliquid doloribus nesciunt. Eligendi laboriosam explicabo rerum. Quasi quam dolores illo aspernatur.

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
Harrison Schiller florine.orn@farrell.info
Abigayle Littel walter.lamont@anderson.biz
Eugene McCullough stuart.bartoletti@wiza.org
Jaylen Schamberger rafael11@yahoo.com
Josiah Streich lemuel.roberts@hand.net
Barbara Mills uhettinger@hotmail.com
Pasquale Sporer hbreitenberg@steuber.com
Blaise Bahringer gretchen.dicki@gmail.com
Eino Bartell fschaden@kub.net
Christophe Kessler thoppe@schaden.info
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

Eos non reiciendis placeat qui veritatis sed ipsam. Velit eos amet ea dicta aut quo natus sunt. Quod dolorum blanditiis et quasi. Repudiandae nihil dolor numquam veniam unde. Eligendi recusandae natus cumque sunt quibusdam error fuga. Voluptatem asperiores deserunt voluptate doloremque. Tempore possimus nihil odit eligendi ut ea non. Blanditiis dolor reprehenderit corrupti id qui velit. Soluta nulla neque doloremque id nostrum. Molestiae et perferendis saepe. Dolorem voluptatum tenetur quaerat eaque qui quasi qui. Itaque est aspernatur id est dolorem. Veniam voluptas assumenda suscipit.

Buttons

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

Headers

H1: Magnam et voluptatibus quo omnis dolorem mollitia earum.

H2: Ut saepe ut error quo est.

H3: Fugiat consequuntur alias natus amet.

H4: Iure quia explicabo quidem eos.

H5: Quidem at soluta et quasi quisquam.
H6: Consequatur qui perferendis ut dolores debitis inventore.

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>
    
    
150 years in the heart of Detroit