Icicle Foundation
Menu

Accordion

Badges

10 11 12 13 14 15

Labels

Default Label Secondary Label Success Label Alert Label Warning Label

Buttons

Learn More

Such Expand

So TinySo SmallJust RightSo Large

Cards

This is a header

This is a card.

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

This is a card.

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

This is a footer

This is a header

This is a card.

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


Do something

This is a header

This is a card.

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

This is a header

This is a card.

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

This is a header

This is a card.

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

Callouts

This is a callout with a close button.

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 a warning 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.

Forms

Here's how you use this input field!

Here's how you use this input field!

Choose Your Favorite
Check these out
$ Submit

This is our hero section

We can convince people of things here

The button below has a class of "snow" to make it white

Call to action

Icons

Basic Icons

ic-user

ic-mail

ic-blog

ic-calendar

Icon Sizes

ic-lg ic-2x ic-3x ic-4x ic-5x

Fixed Width

Use ic-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like menus

List Icons

  • Lorem ipsum dolor sit amet
  • Phasellus iaculis neque
  • Purus sodales ultricies

Bordered, pulled, and rounded

Use ic-border and pull-right or pull-left for easy pull quotes or article icons, and ic-rounded for circles.

Tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Animated

Use the ic-spin class to get any icon to rotate, and use ic-pulse to have it rotate with 8 steps.

Rotated & Flipped

To arbitrarily rotate and flip icons, use the ic-rotate-* and ic-flip-* classes.

Normal

ic-rotate-90

ic-rotate-180

ic-rotate-270

ic-flip-horizontal

ic-flip-vertical

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.

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.

Thumbnails

Basic

Expanded

With Background

With icons

Orbit Slider

  • 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

    Call to Action

Pagination

Progress Bar

15%

25%

50%

75%

Switches

Sliders

Tables

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

Reveal Modal

Click me for a modal

Awesome. I Have It.

Your couch. It is mine.

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

Tooltip

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

Top Bar

Typography

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

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

Foundation for Sites Version 6.0.4

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.

Links are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item
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.
The dimensions of height, depth, and width within which all things exist and move.