Content Area


2 Column Example

Voluptatibus maxime esse voluptas. Non dolorem sint voluptatum hic voluptatem sunt quis. Non molestias magnam necessitatibus quos quos. Fugit unde molestiae suscipit fuga deleniti enim.

Reiciendis consequatur et occaecati qui. Ratione nihil eius accusamus sunt occaecati nemo accusamus. Dolorem sed et doloribus rerum.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Et magnam labore esse. Quia accusamus nesciunt repellendus eos quod veniam nihil ullam. Dignissimos qui repellendus dolorem repellat cupiditate quod voluptas.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>In error numquam consequuntur est consequatur. Molestiae sit quibusdam omnis sint dolore voluptatem quae pariatur. Hic a quidem quo cumque quod ab.</p>
        </div>
    </div>
        
    

Accordion

  • Sint repellendus ut iusto sed.

    Ut ut ut et. Pariatur assumenda enim odio temporibus. Recusandae rerum non soluta nam ut cumque. Iusto provident repellendus consectetur facere qui qui facere.

  • Quis aut eum nihil animi ad.

    Et reiciendis ut sint in voluptatem sunt aliquam laboriosam. Consequatur ex dolor et iure recusandae culpa.

  • Exercitationem quia ad fuga aut tempora sit quas.

    Et vel sit facere sit quia adipisci. Consectetur optio exercitationem dolorum accusantium. Omnis mollitia qui in excepturi nemo quo sed id. Ipsa sunt enim quaerat eveniet suscipit quae quos.

  • Blanditiis quia eos dicta veniam atque.

    Iusto ut ipsa rerum sint. Vel rerum et officiis dolor. Qui laborum eveniet libero sequi minus in atque temporibus.

  • Est commodi quia vel.

    Quis voluptatem nihil dolore est. Omnis quis ex earum eligendi. Exercitationem iste possimus quia ipsam. Quia nisi iure fugiat sint aut enim.

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
Lue Rath rahsaan.beatty@yahoo.com
Laura Hickle beverly74@gmail.com
Santino Schimmel xprohaska@brown.net
Omer Hoppe utremblay@reichert.com
Paul Abshire borer.joe@shanahan.com
Frances Gerlach gparisian@yahoo.com
Enola Wehner sister40@gottlieb.com
Perry Fisher bryana.deckow@hotmail.com
Charley Sawayn aletha22@hotmail.com
Corbin O'Kon nadia11@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

Et quibusdam cupiditate sit sint iste. Incidunt impedit quibusdam quis ea. Maiores odio et pariatur quod eos itaque. Sunt dolorem hic aperiam nisi est dolorem dolor. Quod nesciunt tenetur aut aut. Consectetur omnis pariatur dicta quia repellat. Atque recusandae velit rem illo unde. Sit fuga minima enim eos tenetur. Tenetur alias exercitationem dolores nihil laborum libero est. Rerum iste temporibus quaerat.

Buttons

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

Headers

H1: Beatae maxime sit et consequatur rerum quasi.

H2: Soluta exercitationem quas voluptatem molestiae perspiciatis.

H3: Ab qui voluptatem aut sed voluptatibus aperiam.

H4: Omnis error labore sed nulla eos.

H5: Iste qui doloremque dolorem non eum fugit tempore dolores.
H6: Corrupti non itaque sed reprehenderit molestiae dolorem.

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>