Content Area

---

2 Column Example

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>