Classic Foundation 6 Theme

Clean light-blue Theme


Top Bar  

Custom text

Tob Bar - Dark Blue  

Use class .dark-blue with .tob-bar


Title Bar  

Foundation

Title Bar - Dark Blue  

Foundation

Horizontal Menu  

Vertical Menu  

Drilldown Menu  


Pagination  

Breadcrumbs  


Orbit Slider

Bullets inside  

  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World

Bullets outside  

  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World

Buttons

Classic Foundation Theme has many easy to use button styles that you can customize or override to fit your needs.

Hollow Style  

Switch  

Dropdown Buttons  


Typography

Heading 1  

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph Styles  

Standard text

Primary text - just add class .primary

Secondary text - just add class .secondary

Success text - just add class .success

Warning text - just add class .warning

Alert text - just add class .alert

Text styling  

Standart text with link.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.


Unordered List  

Ordered List  

  1. List item
  2. List item
    • Nested list item
    • Nested list item
    • Nested list item
  3. List item
  4. List item
  5. List item

Definition List  

Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.

Blockquotes  

Great things in business are never done by one person. They're done by a team of people. Steve Jobs

Tables  

Table Header Table Header Table Header Table Header
Regular Table Row This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Content
Primary Table Row This is longer content Donec id elit non mi porta gravida at eget metus. Content Content
Success Table Row This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Content
Warning Table Row This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Content
Alert Table Row This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Content

Tabs  

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.

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.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Accordion  


Forms  

Input Fields, Select Boxes and Textarea

$
SubmitCancel

Checkboxes and Radio Buttons

Check these out

Callouts

Coloring  

Default Callout

Sample Text

Success Callout

Primary Callout

Alert Callout

Warning Callout

Secondary Callout

Making Closable  

This a friendly message.

And when you're done with me, I close using a Motion UI animation.

This is Important!

But when you're done reading it, click the close button in the corner to dismiss this alert.


Made by SD Web Design

<div class="top-bar">
    <div class="row column">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Site Title</li>
                <li>
                    <a href="#">One</a>
                    <ul class="menu vertical">
                        <li><a href="#">One</a>
                            <ul class="menu vertical">
                                <li><a href="#">One</a></li>
                                <li><a href="#">Two</a></li>
                                <li><a href="#">Three</a></li>
                                <li><a href="#">Three</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>

        <div class="top-bar-right">
            <div class="top-bar-inner">
                <ul class="menu">
                    <li><input type="search" placeholder="Search"></li>
                    <li>
                        <button type="button" class="button white">Search</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="top-bar-right">
            <div class="top-bar-inner">
                <div class="top-bar-text"> Custom text</div>
            </div>
        </div>
    </div>
</div>
<div class="top-bar dark-blue">
    <div class="row column">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Site Title |
                    <small>Description</small>
                </li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="dropdown menu" data-dropdown-menu>
                <li>
                    <a href="#">One</a>
                    <ul class="menu vertical">
                        <li><a href="#">One</a>
                            <ul class="menu vertical">
                                <li><a href="#">One</a></li>
                                <li><a href="#">Two</a></li>
                                <li><a href="#">Three</a></li>
                                <li><a href="#">Four</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
                <li><a href="#">Six</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="title-bar">
    <div class="title-bar-left">
        <button class="menu-icon" type="button"></button>
        <span class="title-bar-title">Foundation</span>
    </div>
    <div class="title-bar-right">
        <button class="menu-icon" type="button"></button>
    </div>
</div>
<div class="title-bar dark-blue">
    <div class="title-bar-left">
        <button class="menu-icon" type="button"></button>
        <span class="title-bar-title">Foundation</span>
    </div>
    <div class="title-bar-right">
        <button class="menu-icon" type="button"></button>
    </div>
</div>
<ul class="dropdown menu" data-dropdown-menu>
    <li>
        <a href="#">Item 1</a>
        <ul class="menu">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
            <li><a href="#">Item 1D</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>
<ul class="menu vertical" style="max-width: 280px">
    <li><a href="#"><i class="fa fa-home"></i>  Home</a></li>
    <li><a href="#"><i class="fa fa-book"></i>  Library</a></li>
    <li><a href="#"><i class="fa fa-pencil"></i>  Applications</a></li>
    <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
    <li><a href="#"><i class="fa fa-comments-o"></i>  Support</a></li>
</ul>
<ul class="vertical menu" data-drilldown style="max-width: 280px">
    <li>
        <a href="#Item-1">Item 1</a>
        <ul class="vertical menu" >
            <li><a href="#Item-1A">Item 1A</a></li>
            <li><a href="#Item-1A">Item 1B</a></li>
            <li><a href="#Item-1A">Item 1C</a></li>
        </ul>
    </li>
    <li><a href="#Item-2">Item 2</a></li>
    <li><a href="#Item-2">Item 3</a></li>
    <li><a href="#Item-2">Item 4</a></li>
    <li><a href="#Item-2">Item 5</a></li>
</ul>
<ul class="pagination" role="navigation" aria-label="Pagination">
    <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis" aria-hidden="true"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next <span
            class="show-for-sr">page</span></a></li>
</ul>
<nav aria-label="You are here:" role="navigation">
    <ul class="breadcrumbs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li class="disabled">Gene Splicing</li>
        <li>
            <span class="show-for-sr">Current: </span> Cloning
        </li>
    </ul>
</nav>
<div class="orbit bullets-inside" role="region" aria-label="Favorite Space Pictures" data-orbit>
    <ul class="orbit-container">
        <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎
        </button>
        <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
        <li class="is-active orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
        </li>
        <li class="orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/03.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Lets Rocket!</figcaption>
        </li>
        <li class="orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/04.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Encapsulating</figcaption>
        </li>
        <li class="orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/02.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Outta This World</figcaption>
        </li>
    </ul>

    <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>
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
    <ul class="orbit-container">
        <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎
        </button>
        <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
        <li class="is-active orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
        </li>
        <li class="orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/03.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Lets Rocket!</figcaption>
        </li>
        <li class="orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/04.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Encapsulating</figcaption>
        </li>
        <li class="orbit-slide">
            <img class="orbit-image" src="http://foundation.zurb.com/sites/docs/assets/img/orbit/02.jpg"
                 alt="Space">
            <figcaption class="orbit-caption">Outta This World</figcaption>
        </li>
    </ul>

    <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>
<a href="#" class="medium primary button">Primary Button</a>
<a href="#" class="medium dark button">Dark</a>
<a href="#" class="medium white button">White</a>
<a class="secondary button" href="#">Secondary</a>
<a class="success button" href="#">Success</a>
<a class="alert button" href="#">Alert</a>
<a class="warning button" href="#">Warning</a>
<a class="disabled button" href="#">Disabled</a>
<button class="primary hollow button" href="#">Primary</button>
<button class="secondary hollow button" href="#">Secondary</button>
<button class="success hollow button" href="#">Success</button>
<button class="alert hollow button" href="#">Alert</button>
<button class="warning hollow button" href="#">Warning</button>
<a class="tiny button" href="#">Tiny</a>
<a class="small button" href="#">Small</a>
<a class="button" href="#">Basic</a>
<a class="large button" href="#">Large</a>
<a class="expanded button" href="#">Expanded</a>
<div class="switch">
    <input class="switch-input" checked id="exampleSwitch" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch">
        <span class="show-for-sr">Download Kittens</span>
    </label>
</div>

<div class="switch large">
    <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="yes-no">
        <span class="switch-active" aria-hidden="true">Yes</span>
        <span class="switch-inactive" aria-hidden="true">No</span>
    </label>
</div>
<button class="dropdown button">Dropdown Button</button>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Standard text</p>
<p class="primary">Primary text - just add class <code>
    <small>.primary</small>
</code></p>
<p class="secondary">Secondary text - just add class <code>
    <small>.secondary</small>
</code></p>
<p class="success">Success text - just add class <code>
    <small>.success</small>
</code></p>
<p class="warning">Warning text - just add class <code>
    <small>.warning</small>
</code></p>
<p class="alert">Alert text - just add class <code>
    <small>.alert</small>
</code></p>
<p>Standart text with <a href="#">link</a>.</p>
<p>
    <small>This line of text is meant to be treated as fine print.</small>
</p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<ul>
    <li>List item</li>
    <li>List item
        <ul>
            <li>Nested list item</li>
            <li>Nested list item</li>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
<ol>
    <li>List item</li>
    <li>List item
        <ul>
            <li>Nested list item</li>
            <li>Nested list item</li>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>
<dl>
    <dt>Time</dt>
    <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a
        whole.
    </dd>
    <dt>Space</dt>
    <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
</dl>
<blockquote>
    Great things in business are never done by one person. They're done by a team of people.
    <cite title="Source Title">Steve Jobs</cite>
</blockquote>
<table width="100%">
    <thead>
    <tr>
        <th width="200">Table Header</th>
        <th>Table Header</th>
        <th width="150">Table Header</th>
        <th width="150">Table Header</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Regular Table Row</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content </td>
        <td>Content </td>
    </tr>
    <tr class="primary">
        <td>Primary Table Row</td>
        <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content </td>
        <td>Content </td>
    </tr>
    <tr class="success">
        <td>Success Table Row</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content </td>
        <td>Content </td>
    </tr>
    <tr class="warning">
        <td>Warning Table Row</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content </td>
        <td>Content </td>
    </tr>
    <tr class="alert">
        <td>Alert Table Row</td>
        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
        <td>Content </td>
        <td>Content </td>
    </tr>
    </tbody>
</table>
<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 href="#panel2">Tab 2</a></li>
    <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="panel1">
        <p>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>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 class="tabs-panel" id="panel3">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation
            +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
            craft beer twee. </p>
    </div>
</div>
<ul class="accordion" data-accordion>
    <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">Accordion 1</a>
        <div class="accordion-content" data-tab-content>
            I would start in the open state, due to using the `is-active` state class.
        </div>
    </li>
    <li class="accordion-item " data-accordion-item>
        <a href="#" class="accordion-title">Accordion 2</a>
        <div class="accordion-content" data-tab-content>
            I would start in the open state, due to using the `is-active` state class.
        </div>
    </li>
</ul>
<div class="row">
    <div class="large-8 medium-8 columns">
        <h4>Input Fields, Select Boxes and Textarea</h4>
        <form>
            <div class="row">
                <div class="large-12 columns">
                    <label>Input Label</label>
                    <input type="text" placeholder="large-12.columns"/>
                </div>
            </div>
            <div class="row">
                <div class="large-4 medium-4 columns">
                    <label>Input Label</label>
                    <input type="text" placeholder="large-4.columns"/>
                </div>
                <div class="large-4 medium-4 columns">
                    <label>Input Label</label>
                    <input type="text" placeholder="large-4.columns"/>
                </div>
                <div class="large-4 medium-4 columns">
                    <label>Input Label</label>
                    <input type="text" placeholder="large-4.columns"/>
                </div>

            </div>

            <div class="row">
                <div class="large-6 columns">
                    <label>Select Box</label>
                    <select>
                        <option value="husker">Husker</option>
                        <option value="starbuck">Starbuck</option>
                        <option value="hotdog">Hot Dog</option>
                        <option value="apollo">Apollo</option>
                    </select>
                </div>
                <div class="large-6 columns">
                    <label>Inline Label</label>
                    <div class="input-group">
                        <span class="input-group-label">$</span>
                        <input class="input-group-field" type="number">

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="large-12 columns">
                    <label>Textarea Label</label>
                    <textarea placeholder="small-12.columns"></textarea>
                </div>
            </div>
        </form>
        <a class="button">Submit</a><a class="button white">Cancel</a>
    </div>

    <div class="large-4 medium-4 columns">
        <h4>Checkboxes and Radio Buttons</h4>
        <form>
            <div class="row">
                <div class="large-12 columns">
                    <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio
                    1</label>
                    <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label
                        for="pokemonBlue">Radio
                    2</label>
                </div>
            </div>

            <div class="row">
                <div class="large-12 columns">
                    <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
                    <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
                </div>
            </div>

            <div class="row">
                <div class="large-12 columns">
                    <fieldset class="fieldset">
                        <legend>Check these out</legend>
                        <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
                        <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
                    </fieldset>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="row">
    <div class="columns">
        <div class="callout">
            <h5>Default Callout</h5>
            <p>Sample Text</p>
            <span></span>
        </div>
    </div>
</div>
<div class="row">
    <div class="large-6 medium-6 columns">
        <div class="success callout">
            <p>Success Callout</p>
        </div>
    </div>
    <div class="large-6 medium-6 columns">
        <div class="primary callout">
            <p>Primary Callout</p>
        </div>
    </div>
</div>
<div class="row">
    <div class="large-4 medium-4 columns">
        <div class="alert callout">
            <p>Alert Callout</p>
        </div>
    </div>
    <div class="large-4 medium-4 columns">
        <div class="warning callout">
            <p>Warning Callout</p>
        </div>
    </div>
    <div class="large-4 medium-4 columns">
        <div class="secondary callout">
            <p>Secondary Callout</p>
        </div>
    </div>
</div>
<div class="success callout" data-closable="slide-out-right">
    <h5>This a friendly message.</h5>
    <p>And when you're done with me, I close using a Motion UI animation.</p>
    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
        <span aria-hidden="true">×</span>
    </button>
</div>
<div class="alert callout" data-closable>
    <h5>This is Important!</h5>
    <p>But when you're done reading it, click the close button in the corner to dismiss this
        alert.</p>
    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
        <span aria-hidden="true">×</span>
    </button>
</div>