features

Alert

Toogle Code
<div class="callout" data-closable>
<p>You can so totally close this!</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="success callout" data-closable="slide-out-right">
<p>You can close me too, and I close using a Motion UI animation.</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
</div>
This is a secondary callout
This is a primary callout
This is a success callout
This is a warning callout
This is an alert callout

Tooltip

Toogle Code
<p>
The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. 
</p>
<button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Tooltip on the top" data-position="top" data-alignment="center">
Tooltip on the top
</button>

<button class="button" type="button"  data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Tooltip on the bottom" data-position="bottom" data-alignment="center">
Tooltip on the bottom
</button>

<button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Tooltip on the left" data-position="left" data-alignment="center">
Tooltip on the left
</button>

<button class="button" type="button" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Tooltip on the right" data-position="right" data-alignment="center">
Tooltip on the right
</button>

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.

Slider

Toogle Code
<div class="slider" data-slider data-initial-start="50" data-end="200">
<span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<input type="hidden">
<input type="hidden">
</div>

Buttons

Basic
Toogle Code
<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
<a href="#features" class="button secondary">View All Features</a>

<!-- Buttons (actions) -->
<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>

Hollow Style
Toogle Code
<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>

Sizing
Toogle Code
<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>

Accordion

Toogle Code
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<!-- Accordion tab title -->
<a href="#" class="accordion-title">Accordion 1</a>

<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content" data-tab-content>
<p>Panel 1. Lorem ipsum dolor</p>
<a href="#">Nowhere to Go</a>
</div>
</li>
<!-- ... -->
</ul>
  • Accordian Items #1

    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

  • Accordian Items #2

    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

  • Accordian Items #3

    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

Tabs

Basics
Toogle Code
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.

It's also called placeholder.Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.


Vertical
Toogle Code
<div class="grid-x grid-padding-x">
<div class="medium-3 cell">
<ul class="vertical tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
<li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
<li class="tabs-title"><a href="#panel5v">Tab 5</a></li>
<li class="tabs-title"><a href="#panel6v">Tab 6</a></li>
</ul>
</div>
<div class="medium-9 cell">
<div class="vertical tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Four</p>
<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5v">
<p>Five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Six</p>
<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
</div>
</div>

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder.

Typography

Paragraphs
Toogle Code
<p class="lead">This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.


Heading
Toogle Code
<h1 class="md">h1. This is a very large header.</h1>
<h2 class="md">h2. This is a large header <small>with a subtitle</small></h2>
<h3 class="md">h3. This is a medium header.</h3>
<h4 class="md">h4. This is a moderate header.</h4>
<h5 class="md">h5. This is a small header.</h5>
<h6 class="md">h6. This is a tiny header.</h6>

h1. This is a very large header.

h2. This is a large header with a subtitle

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

Blockquotes
Toogle Code
<blockquote>
Those people who think they know everything are a great annoyance to those of us who do.
<cite>Isaac Asimov</cite>
</blockquote>
<blockquote class="blockquoteAlt">
Those people who think they know everything are a great annoyance to those of us who do.
<cite>Isaac Asimov</cite>
</blockquote>
Those people who think they know everything are a great annoyance to those of us who do. John Doe Lorem
There was never a genius without a tincture of madness. John Doe Lorem

Icon Lists
Toogle Code
<ul class="iconList">
<li>List item 1</li>
<li>List item 2</li> 
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

Grids

Basics
Toogle Code
<div class="grid-x">
<div class="cell">full width cell</div>
<div class="cell">full width cell</div>
</div>
<div class="grid-x">
<div class="small-6 cell">6 cells</div>
<div class="small-6 cell">6 cells</div>
</div>
<div class="grid-x">
<div class="medium-6 large-4 cell">12/6/4 cells</div>
<div class="medium-6 large-8 cell">12/6/8 cells</div>
</div>
full width cell
full width cell
6 cells
6 cells
12/6/4 cells
12/6/8 cells

Gutters
Toogle Code
<div class="grid-x grid-margin-x">
<div class="medium-6 large-4 cell">12/6/4 cells</div>
<div class="medium-6 large-8 cell">12/6/8 cells</div>
</div>
<div class="grid-x grid-padding-x">
<div class="medium-6 large-4 cell">12/6/4 cells</div>
<div class="medium-6 large-8 cell">12/6/8 cells</div>
</div>
12/6/4 cells
12/6/8 cells
12/6/4 cells
12/6/8 cells

Auto Sizing
Toogle Code
<div class="grid-x grid-margin-x">
<div class="small-4 cell">4 cells</div>
<div class="auto cell">Whatever's left!</div>
<div class="auto cell">Whatever's left!</div>
</div>
<div class="grid-x grid-margin-x">
<div class="shrink cell">Shrink!</div>
<div class="auto cell">Expand!</div>
</div>
4 cells
Whatever's left!
Whatever's left!
Shrink!
Expand!

Collapse Cells
Toogle Code
<div class="grid-x grid-margin-x medium-margin-collapse">
<div class="small-6 cell">
Gutters at small no gutters at medium.
</div>
<div class="small-6 cell">
Gutters at small no gutters at medium.
</div>
</div>
Gutters at small no gutters at medium.
Gutters at small no gutters at medium.

Offsets
Toogle Code
<div class="grid-x grid-margin-x">
<div class="small-4 large-offset-2 cell">Offset 2 on large</div>
<div class="small-4 cell">4 cells</div>
</div>
Offset 2 on large
4 cells

Block Grids
Toogle Code
<div class="grid-x grid-padding-x small-up-2 medium-up-4 large-up-6">
<div class="cell">cell</div>
<div class="cell">cell</div>
<div class="cell">cell</div>
<div class="cell">cell</div>
<div class="cell">cell</div>
<div class="cell">cell</div>
</div>
cell
cell
cell
cell
cell
cell

Vertical Grids
Toogle Code
<div class="grid-y" style="height: 200px;">
<div class="cell small-6 medium-8 large-2">
6/8/2
</div>
<div class="cell small-6 medium-4 large-10">
6/4/10
</div>
</div>
6/8/2
6/4/10

Forms

Contact Form
Toogle Code
<form>
<div class="grid-x grid-padding-x">
<div class="medium-6 cell">
<input type="text" placeholder="Your Full Name">
</div>
<div class="medium-6 cell">
<input type="text" placeholder="Your Email">
</div>
<div class="medium-12 cell">
<textarea placeholder="Message"></textarea>
</div>
<div class="medium-12 cell">
<input type="submit" class="button" value="submit form">
</div>
</div>
</form>

Subscription Form
Toogle Code
<form class="subscription_form">
<div class="grid-x grid-padding-x"> 
<div class="medium-12 cell">
<input type="text" placeholder="Enter Your Email">
<button type="button">   
<em class="fa fa-long-arrow-right"></em>   
</button>
</div>  
</div>
</form>

Table

Toogle Code
<div class="table-container">
<table class="unstriped">
<thead>
<tr>
<th width="190">Table Header</th>
<th>Table Header</th>
<th width="190">Table Header</th>
<th width="190">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>
</div>
Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer content Donec id elit mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer content Donec id elit mi porta gravida at eget metus. Content Goes Here Content Goes Here

Orbit Slider

Foundation Orbit Slider
Toogle Code
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><em class="fa fa-angle-left"></em></button>	  
<button class="orbit-next"><em class="fa fa-angle-right"></em></button>
</div>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space">          
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space">          
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space">
</figure>
</li>
</ul>
</div>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
  • Space
  • Space
  • Space
  • Space

Orbit Content Slider
Toogle Code
<li class="orbit-slide">
<div class="orbit-content">
<h3 class="text-center">2: You can also throw some text in here!</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
<h3 class="text-center">This Orbit slider does not use animations.</h3>
</div>
</li>
  • This is a heading

    Lorem ipsum dolor sit amet, eius mentitum consectetuer ad eam, saepe dicant munere nec te. Latine incorrupte cu mel. Ei vis quas definitionem. Cu vel doctus mnesarchum, vix veritus theophrastus te, id sit tritani reformidans consectetuer. In vitae scripserit delicatissimi cum. Alienum mandamus intellegat ex est. Duo an odio tation urbanitas, ei dicant accusamus constituto eam.

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

Reveal Modal

Toogle Code
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!