Content Area


2 Column Example

Non quidem molestiae cum sequi ut. Occaecati sequi voluptatibus dolore et voluptatem deleniti. Quia nostrum consectetur aliquid. Ullam unde nulla aut minus iusto veniam.

Architecto et maxime fuga nulla qui molestiae est. Iste dolorum vero eligendi deleniti ipsa. Voluptatem voluptatem cum sint laudantium ad. Laudantium earum doloremque et qui repellat recusandae molestiae.

See Row/Columns Code
        
    <div class="row">
        <div class="small-12 large-6 columns">
            <p>Dolor exercitationem consequatur aut ut. Modi nihil laudantium distinctio. Vero eos corporis explicabo officiis.</p>
        </div>
        <div class="small-12 large-6 columns">
            <p>Deleniti hic aspernatur autem vel nulla. Natus quisquam voluptatem qui accusamus impedit quisquam dolorem. Enim corporis vitae asperiores doloribus quasi provident. Eligendi ut id enim itaque.</p>
        </div>
    </div>
        
    

Accordion

  • Ullam sit iure quibusdam nulla architecto voluptate fuga.

    Magnam eligendi voluptas facere et quo neque rerum. Ullam ducimus aspernatur dolor laborum quod. Tempora minima voluptatibus aut amet sequi quo eos.

  • Velit explicabo fugiat ut debitis.

    Voluptatem et sapiente in aliquid natus totam. Sit alias doloremque officiis consectetur tenetur ea doloribus. Corrupti molestiae officia similique non qui quis totam itaque. Voluptatem sed quibusdam sed repellat quod voluptatem.

  • Deserunt aut nulla dolorem nobis quo fuga.

    Sed autem ipsum magni aut eum. Quae tempore voluptatibus qui et aspernatur. Saepe vel molestias rerum ipsam sunt. Id odit repudiandae maxime aut.

  • Et quis reiciendis sit ullam.

    Non voluptatum ipsam hic cum molestiae quis. Magnam et ut et magni cupiditate aperiam. Placeat harum iste eum iure et.

  • Et est quibusdam ad.

    Ducimus ab dolor ut id ut non voluptatem. Ratione et rem qui eum. Quisquam quam exercitationem quia molestias iure. Harum error molestiae fuga quia sunt inventore.

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
Angeline Kulas oconnell.maximus@schamberger.com
Edna Ernser oswaniawski@casper.com
Ramona Grady bergnaum.raphaelle@kreiger.net
Reinhold Sporer rau.luella@toy.net
Brandi Gusikowski fritchie@yahoo.com
Robb Smitham okeefe.arden@mann.com
Missouri Hayes ken32@hotmail.com
River Kunde reanna15@kuhn.com
Maynard Quigley crooks.maximilian@kreiger.com
Ariane Goldner colt61@gmail.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

Sit earum provident voluptas autem officiis quo. Tempore odit in ut adipisci blanditiis ratione. Eaque non reiciendis qui sunt et id et. Cupiditate aliquam necessitatibus quaerat cupiditate possimus. Labore numquam inventore rem et eum facilis. Voluptas asperiores quisquam odio inventore labore quibusdam ea. Omnis debitis perferendis natus ut. Sunt animi nesciunt minima dolores consequatur qui incidunt.

Buttons

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

Headers

H1: Debitis animi aliquam voluptatem eum iure quidem veniam.

H2: Autem repellat enim et autem quia temporibus maxime cupiditate.

H3: Ad explicabo veniam ratione eos eligendi pariatur.

H4: Error non et autem quisquam assumenda.

H5: Velit voluptate qui voluptates.
H6: Soluta consectetur non et et amet nemo.

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