Components

  • Typography
  • Abide
  • Accordion
  • Accordion Menu
  • Badge
  • Breadcrumbs
  • Button
  • Button Group
  • Callout
  • Close Button
  • Drilldown Menu
  • Dropdown
  • Dropdown Menu
  • Equalizer
  • Flex Video
  • Float Classes
  • Forms
  • Grid
  • Interchange
  • Label
  • Magellan
  • Media Object
  • Menu
  • Off-canvas
  • Orbit
  • Pagination
  • Progress Bar
  • Responsive Menu
  • Responsive Toggle
  • Reveal
  • Slider
  • Sticky
  • Switch
  • Table
  • Tabs
  • Thumbnail
  • Title Bar
  • Toggler
  • Tooltip
  • Top Bar
  • Visibility Classes

Megatype + Foundation

Proof-of-concept integration of Foundation with MegaType.

Foundation 6 Docs MegaType Docs

Typography

View Foundation 6 Typography documentation

This is a Heading level 1

This is a Heading level 2

The most merciful thing in the world, I think, is the inability of the human mind to correlate all its contents.

We live on a placid island of ignorance in the midst of black seas of infinity, and it was not meant that we should voyage far. The sciences, each straining in its own direction, have hitherto harmed us little; but some day the piecing together of dissociated knowledge will open up such terrifying vistas of reality, and of our frightful position therein, that we shall either go mad from the revelation or flee from the deadly light into the peace and safety of a new dark age.

Mystery derelict found at sea

Vigilant Arrives With Helpless Armed New Zealand Yacht in Tow. One Survivor and Dead Man Found Aboard. Tale of Desperate Battle and Deaths at Sea. Rescued Seaman Refuses Particulars of Strange Experience. Odd Idol Found in His Possession. Inquiry to Follow.

The Morrison Co.'s freighter Vigilant, bound from Valparaiso, arrived this morning at its wharf in Darling Harbour, having in tow the battled and disabled but heavily armed steam yacht Alert of Dunedin, N.Z., which was sighted April 12th in S. Latitude 34° 21', W. Longitude 152° 17', with one living and one dead man aboard.


Abide

View Foundation 6 Abide documentation

There are some errors in your form.

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

View Foundation 6 Accordion documentation

  • Accordion 1
    Panel 1. Lorem ipsum dolor
  • Accordion 1
    Panel 2. Lorem ipsum dolor
  • Accordion 1
    Panel 3. Lorem ipsum dolor

Accordion Menu

View Foundation 6 Accordion Menu documentation

  • Item 1
    • Item 1A
      • Item 1Ai
      • Item 1Aii
      • Item 1Aiii
    • Item 1B
    • Item 1C
  • Item 2
    • Item 2A
    • Item 2B
  • Item 3

Badge

View Foundation 6 Badge documentation

2 3 A B

Breadcrumbs

View Foundation 6 Breadcrumbs documentation

  • Home
  • Features
  • Gene Splicing
  • Current: Cloning

Button

View Foundation 6 Button documentation

Learn More View All Features Secondary Color Success Color Alert Color Warning Color Disabled Button Tiny Small Large Expanded

Button Group

View Foundation 6 Button Group documentation

One Two Three
Expanded Button Group
Stacked On Small Breakpoint
Primary Action Show menu

Callout

View Foundation 6 Callout documentation

This is a default 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 uses the secondary colour.

It's dangerous to go alone, take this.

This is a primary callout

It has an easy to override visual style, and uses the primary colour.

It's dangerous to go alone, take this.

This is a success callout

It has an easy to override visual style, and uses the success colour.

It's dangerous to go alone, take this.

This is an info callout

It has an easy to override visual style, and uses the info colour.

It's dangerous to go alone, take this.

This is a warning callout

It has an easy to override visual style, and uses the warning colour.

It's dangerous to go alone, take this.

This is an alert callout

It has an easy to override visual style, and uses the alert colour.

It's dangerous to go alone, take this.

This is an transparent callout

It has an easy to override visual style, and uses a transparent background.

It's dangerous to go alone, take this.


Close Button

View Foundation 6 Close Button documentation

This is a static close button example.


Drilldown Menu

View Foundation 6 Drilldown Menu documentation

  • Item 1
    • Item 1A
      • Item 1Aa
      • Item 1Ba
      • Item 1Ca
      • Item 1Da
      • Item 1Ea
    • Item 1B
    • Item 1C
    • Item 1D
    • Item 1E
  • Item 2
    • Item 2A
    • Item 2B
    • Item 2C
    • Item 2D
    • Item 2E
  • Item 3
    • Item 3A
    • Item 3B
    • Item 3C
    • Item 3D
    • Item 3E
  • Item 4

Dropdown

View Foundation 6 Dropdown documentation

Just some junk that needs to be said. Or not. Your choice.

Dropdown Menu

View Foundation 6 Dropdown Menu documentation

  • Item 1
    • Item 1A Loooong
    • Item 1 sub
      • Item 1 subA
      • Item 1 subB
      • Item 1 sub
        • Item 1 subA
        • Item 1 subB
      • Item 1 sub
        • Item 1 subA
    • Item 1B
  • Item 2
    • Item 2A
    • Item 2B
  • Item 3
  • Item 4

Equalizer

View Foundation 6 Equalizer documentation

Pellentesque habitant morbi tristique senectus et netus et, ante.


Flex Grid

Flex Grid

View Foundation 6 Flex Grid documentation

6 columns
6 columns
12/6/4 columns
12/6/8 columns

Flex Video

View Foundation 6 Flex Video documentation


Float Classes

View Foundation 6 Float Classes documentation

Left Right

Forms

View Foundation 6 Forms documentation

Here's how you use this input field!

Choose Your Favorite
Check these out
$ Submit

Grid

View Foundation 6 Grid documentation

2/3/4 columns
4/3/4 columns
6/6/4 columns
12/12/3 columns
12/12/6 columns
12/12/3 columns
6/6/2 columns
6/6/8 columns
12/12/2 columns
3 columns
9 columns
12/8/4 columns
12/4/8 columns

Interchange

View Foundation 6 Interchange documentation


Label

View Foundation 6 Label documentation

Label Secondary Label Success Label Alert Label Warning Label

Magellan

View Foundation 6 Magellan documentation

  • First Arrival
  • Second Arrival
  • Third Arrival

First section

Duis scelerisque ligula ut metus rhoncus scelerisque. Integer ut egestas metus. Nulla facilisi. Aenean luctus magna lobortis ligula rhoncus, sit amet lacinia lorem sagittis. Sed ultrices at metus id aliquet. Vestibulum in condimentum quam, id ornare erat. Vivamus nec justo quis ex fringilla condimentum ac non quam.

Second section

Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt.

Second section

Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt.


Media Object

View Foundation 6 Media Object documentation

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.


Menu

View Foundation 6 Menu documentation

  • One
  • Two
  • Three
  • Four

  • One
  • Two
  • Three
  • Four

Off-canvas

View Foundation 6 Off-canvas documentation


Orbit

View Foundation 6 Orbit documentation

With text content


  • 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

With captioned images


  • Sample image 1
    Sample image caption 1.
  • Sample image 2
    Sample image caption 2.
  • Sample image 3
    Sample image caption 3.
  • Sample image 4
    Sample image caption 4.

Pagination

View Foundation 6 Pagination documentation

  • Previous page
  • You're on page 1
  • 2
  • 3
  • 4
  • 12
  • 13
  • Next page

Progress Bar

View Foundation 6 Progress Bar documentation

25%

50%

75%


Responsive Menu

View Foundation 6 Responsive Menu documentation

  • Item 1
  • Item 2
  • Item 3

Responsive Toggle

View Foundation 6 Responsive Toggle documentation

Menu
  • Site Title
  • One
    • One
    • Two
    • Three
  • Two
  • Three

Reveal

View Foundation 6 Reveal documentation

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!


Slider

View Foundation 6 Slider documentation


Sticky

View Foundation 6 Sticky documentation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.


Table

View Foundation 6 Table documentation

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

View Foundation 6 Tabs documentation

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5
  • Tab 6

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


Thumbnail

View Foundation 6 Thumbnail documentation


Title Bar

View Foundation 6 Title Bar documentation

Foundation

Toggler

View Foundation 6 Toggler documentation

Expand!

  • One
  • Two
  • Three
  • Four

Tooltip

View Foundation 6 Tooltip documentation

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

View Foundation 6 Top Bar documentation

Page title

Main menu

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Visibility Classes

View Foundation 6 Visibility Classes documentation

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.

Can sort of 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.

This text can be seen, but won't be read by a screen reader.

Skip to Content

Components

  • Typography
  • Abide
  • Accordion
  • Accordion Menu
  • Badge
  • Breadcrumbs
  • Button
  • Button Group
  • Callout
  • Close Button
  • Drilldown Menu
  • Dropdown
  • Dropdown Menu
  • Equalizer
  • Flex Video
  • Float Classes
  • Forms
  • Grid
  • Interchange
  • Label
  • Magellan
  • Media Object
  • Menu
  • Off-canvas
  • Orbit
  • Pagination
  • Progress Bar
  • Responsive Menu
  • Responsive Toggle
  • Reveal
  • Slider
  • Sticky
  • Switch
  • Table
  • Tabs
  • Thumbnail
  • Title Bar
  • Toggler
  • Tooltip
  • Top Bar
  • Visibility Classes

Footer