Kitchen Sink

Abide

Here's how you use this input field!

This input is ignored by Abide using `data-abide-ignore`

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Choose Your Favorite, and this is required, so you have to pick one.
Choose Your Favorite - not required, you can leave this one blank.
Check these out

Accordion

Accordion Menu

Badge

2 2 3 3 A B

Basic Buttons

Learn More View All Features

Actions

Sizing

So Tiny So Small So Large Such Expand

Groups

One Two Three

Even-width Group

Expanded Button Group

Split Buttons

Primary Action Show menu

Coloring

Primary Color Secondary Color Success Color Info Color Warning Color Alert Color Disabled Button

Hollow

This doesn't add dropdown functionality automatically. To do that, you need to use the Dropdown plugin.

Accessibility

Screen readers will see "close". Visual users will see the X, but not the "Close" text.

Callout

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a primary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an info callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Notice (Framework)

This is a default notice box where content should go. Link to something and go somewhere.
This is a primary notice box where content should go. Link to something and go somewhere.
This is a secondary notice box where content should go. Link to something and go somewhere.
This is a success notice box where content should go. Link to something and go somewhere.
This is an info notice box where content should go. Link to something and go somewhere.
This is an error notice box where content should go. Link to something and go somewhere.
This is a warning notice box where content should go. Link to something and go somewhere.

Close Button

This is a static close button example.

Drilldown Menu

Flex Video

Float Classes

Left Right

Forms

Here's how you use this input field!

Choose Your Favorite
Check these out
$ Submit

Label

Default Label Secondary Label Success Label Alert Label Warning Label

With Icons

Alert Label Warning Label Info Label

Media Object

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Section Alignment

Each section aligns to the top by default, but individual sections can also be middle- or bottom-aligned with the .middle and .bottom classes.

Why is it so important to dream?

So, once we've made the plant, how do we go out? Hope you have something more elegant in mind than shooting me in the head? A kick. What's a kick? This, Ariadne, would be a kick.

What is the most resilient parasite? Bacteria? A virus? An intestinal worm? An idea. Resilient... highly contagious. Once an idea has taken hold of the brain it's almost impossible to eradicate. An idea that is fully formed - fully understood - that sticks; right in there somewhere.

Nesting Media Objects

I'm First!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at, tenetur cum beatae excepturi id ipsa? Esse dolor laboriosam itaque ea nesciunt, earum, ipsum commodi beatae velit id enim repellat.

I'm Second!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas magni, quam mollitia voluptatum in, animi suscipit tempora ea consequuntur non nulla vitae doloremque. Eius rerum, cum earum quae eveniet odio.

Motion UI

This panel fades.

This panel slides.

Orbit

  • 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.

    This Orbit slide has chill

  • 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.

    This Orbit slide has chill

  • 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.

    This Orbit slide has chill

  • 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.

    This Orbit slide has chill

Pagination

Progress Bar

25%

50%

75%

Reveal

Click me for a basic modal

Click me for a full-screen modal

This is a basic modal

Using hipster ipsum for dummy text

Stumptown direct trade swag hella iPhone post-ironic. Before they sold out blog twee, quinoa forage pour-over microdosing deep v keffiyeh fanny pack. Occupy polaroid tilde, bitters vegan man bun gentrify meggings.

Full screen modal

Intropsective Cage

Slider



Native range slider: In Foundation 6.2, we introduced styles for <input type="range">, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. View browser support for the range input type.

Switch

Table

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Tabs

one

Check me out! I'm a super cool Tab panel with text content!

two

three

Check me out! I'm a super cool Tab panel with text content!

four

five

Check me out! I'm a super cool Tab panel with text content!

six

Vertical Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Thumbnail

Placeholder image.
Placeholder image.
Placeholder image.

Title Bar

FoundationPress

Toggler

Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.

Top Bar

Visibility classes

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.

You are not on a medium screen or larger.

You are not on a large screen or larger.

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

Can't touch this.

You are in landscape orientation.

You are in portrait orientation.

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.