Content Area


2 Column Example

Assumenda et dolor est. Nihil eaque nobis magnam quis enim nobis nihil.

Alias totam veritatis quaerat voluptates et expedita. Fuga non assumenda ipsa vitae. Sed neque eligendi odio est. Qui dicta numquam eius sit. Autem ex labore ex atque.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Quia ut enim officiis aliquid rem illo. Modi nihil veniam nemo occaecati. Assumenda quaerat rem molestiae officiis iusto reprehenderit molestiae.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Ducimus provident harum nihil laudantium assumenda iste. Earum est at ipsa iure omnis. Qui porro amet placeat quibusdam unde soluta officiis eos.</p>
        </div>
    </div>
        
    

Accordion

  • Natus impedit asperiores suscipit optio.

    Enim et molestias quia porro repudiandae. Odit non repellat expedita et animi. Repellat modi explicabo recusandae autem.

  • Non eum est ratione veritatis.

    Quo sed ad corporis esse culpa quia eum recusandae. Distinctio voluptas laboriosam deleniti eum. Et similique neque et voluptas placeat. Ducimus cupiditate aut nulla dolorem. Asperiores ut necessitatibus eligendi iure ut praesentium.

  • Eum eaque non voluptatem ipsam.

    Tenetur omnis accusamus ipsam occaecati earum qui molestiae. Quia et eius labore repellendus omnis corrupti. In saepe architecto laborum recusandae. Sunt rerum error explicabo.

  • Quaerat iure veniam nulla adipisci neque fugit saepe.

    Et qui voluptatum dolorum in totam. Aliquid qui quia rerum fuga ea quia. Laborum itaque maiores architecto consequuntur dicta est ut. Ab nisi rerum aspernatur rerum id dolor animi eum.

  • Laborum assumenda deserunt delectus dolorem ut ex.

    Minima nihil ad nemo ut. Id quis necessitatibus in aut alias est. Dolorem et reprehenderit est voluptatem accusamus. Enim nobis molestias et enim consequuntur.

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
Sincere Trantow ekoss@yahoo.com
Carissa Hoeger junius26@schultz.net
Roscoe White hwuckert@hotmail.com
Rachel Heathcote brenden20@hotmail.com
Miracle Medhurst greenholt.adrianna@padberg.com
Humberto Lueilwitz rohan.billie@farrell.com
Karley Satterfield tiana52@gmail.com
Toby Bergstrom effertz.makenzie@swaniawski.com
Jaime Huel javonte.anderson@hessel.net
Zelda Schulist jast.allene@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

Sapiente laboriosam optio sequi possimus. Qui voluptatem ut delectus est et rerum. Voluptas dolores quam voluptas ratione quis. Aperiam similique perferendis magni rerum quasi quia sed eum. Ut soluta ut aperiam incidunt voluptates animi. Suscipit temporibus placeat velit quidem inventore eaque minus. Ratione occaecati eligendi perferendis assumenda. Sed suscipit totam sint qui. Nihil quia inventore architecto.

Buttons

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

Headers

H1: Assumenda dolores et non et.

H2: Voluptatum ut sed vitae nemo est non perspiciatis vel.

H3: Voluptatem porro at dicta.

H4: Sint quasi consequatur nam est veritatis commodi minima qui.

H5: Ipsam assumenda officiis hic quasi.
H6: Voluptates eveniet enim aut voluptatem eos nesciunt enim.

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>