Megatype + Foundation

Proof-of-concept integration of Foundation with MegaType.

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

Number Required Yo, you had better fill this out, it's required.

Here's how you use this input field!

Nothing Required!

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

Password Required I'm required!

Enter a password please.

Re-enter Password Hey, passwords are supposed to match!

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

URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.

European Cars, Choose One, it can't be the blank option.

Choose Your Favorite, and this is required, so you have to pick one. Red Blue Yellow

Choose Your Favorite - not required, you can leave this one blank. Red Blue Yellow

Check these out Checkbox 1 Checkbox 2 Checkbox 3

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

View Foundation 6 Accordion Menu documentation

Badge

View Foundation 6 Badge documentation

2 3 A B

Breadcrumbs

View Foundation 6 Breadcrumbs documentation

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

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.

View Foundation 6 Drilldown Menu documentation

View Foundation 6 Dropdown documentation

View Foundation 6 Dropdown Menu documentation

Equalizer

View Foundation 6 Equalizer documentation

Pellentesque habitant morbi tristique senectus et netus et, ante.

Flex Grid

View Foundation 6 Flex Grid documentation

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

Input Label

Here's how you use this input field!

How many puppies? What books did you read over summer break? Select Menu

Choose Your Favorite Red Blue Yellow

Check these out Checkbox 1 Checkbox 2 Checkbox 3

Label

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

View Foundation 6 Menu documentation

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 caption 1.
Sample image caption 2.
Sample image caption 3.
Sample image caption 4.

Pagination

View Foundation 6 Pagination documentation

Progress Bar

View Foundation 6 Progress Bar documentation

25%

50%

75%

View Foundation 6 Responsive Menu documentation

Responsive Toggle

View Foundation 6 Responsive Toggle documentation

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.

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!

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

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 sort of touch this.

You are in landscape orientation.

You are in portrait orientation.

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

Megatype + Foundation

Typography

This is a Heading level 1

This is a Heading level 2

Mystery derelict found at sea

Abide

Accordion

Accordion Menu

Badge

Breadcrumbs

Button

Button Group

Callout

This is a default callout.

This is a secondary callout

This is a primary callout

This is a success callout

This is an info callout

This is a warning callout

This is an alert callout

This is an transparent callout

Close Button

Drilldown Menu

Dropdown

Dropdown Menu

Equalizer

Flex Grid

Flex Grid

Flex Video

Float Classes

Forms

Grid

Interchange

Label

Magellan

First section

Second section

Second section

Media Object

Dreams feel real while we're in them.

Menu

Off-canvas

Orbit

With text content

You can also throw some text in here!

This Orbit slide has chill

You can also throw some text in here!

This Orbit slide has chill

You can also throw some text in here!

This Orbit slide has chill

You can also throw some text in here!

This Orbit slide has chill

With captioned images

Pagination

Progress Bar

Responsive Menu

Responsive Toggle

Reveal

Awesome. I Have It.

Slider

Sticky

Table

Tabs

Thumbnail

Title Bar

Toggler

Tooltip

Top Bar

Page title

Visibility Classes