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
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
Badge
View Foundation 6 Badge documentation
2 3 A BBreadcrumbs
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 ExpandedButton Group
View Foundation 6 Button Group documentation
Callout
View Foundation 6 Callout documentation
This is a default callout.
It has an easy to override visual style, and is appropriately subdued.
This is a secondary callout
It has an easy to override visual style, and uses the secondary colour.
This is a primary callout
It has an easy to override visual style, and uses the primary colour.
This is a success callout
It has an easy to override visual style, and uses the success colour.
This is an info callout
It has an easy to override visual style, and uses the info colour.
This is a warning callout
It has an easy to override visual style, and uses the warning colour.
This is an alert callout
It has an easy to override visual style, and uses the alert colour.
This is an transparent callout
It has an easy to override visual style, and uses a transparent background.
Close Button
View Foundation 6 Close Button documentation
This is a static close button example.
Drilldown Menu
View Foundation 6 Drilldown Menu documentation
Dropdown
View Foundation 6 Dropdown documentation
Dropdown Menu
View Foundation 6 Dropdown Menu documentation
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
Flex Video
View Foundation 6 Flex Video documentation
Float Classes
View Foundation 6 Float Classes documentation
Forms
View Foundation 6 Forms documentation
Grid
View Foundation 6 Grid documentation
Interchange
View Foundation 6 Interchange documentation
Label
View Foundation 6 Label documentation
Label Secondary Label Success Label Alert Label Warning LabelMagellan
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.
Menu
View Foundation 6 Menu documentation
Off-canvas
View Foundation 6 Off-canvas documentation
Orbit
View Foundation 6 Orbit documentation
With text content
With captioned images
Pagination
View Foundation 6 Pagination documentation
Progress Bar
View Foundation 6 Progress Bar documentation
25%
50%
75%
Responsive Menu
View Foundation 6 Responsive Menu documentation
Responsive Toggle
View Foundation 6 Responsive Toggle documentation
Reveal
View Foundation 6 Reveal documentation
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
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
Toggler
View Foundation 6 Toggler documentation
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
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.
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.