--- name: home url: /home ---

Foundation for Apps Alpha

Components

Layout
Navigation
Callouts
Controls
Content
Helpers

The Interrobang

We've got one super page with many of our fancy new components on display, including the grid, block grid, off-canvas, panels, menu bars, block lists, and dropdowns.

Visit the Interrobang

Or visit the playground where everything is angular based:

Visit the Playground

The Grid

Our new grid is built on Flexbox and includes many improvements over the Foundation 5 layout, including vertical grids, independently-scrollable panes, easier source ordering, and more.

Read the grid docs
Block

Block

Block

Block

Panels

Panels are frames that slide in from the top, left, bottom, or right of the screen and appear over the interface. Grid blocks can also transform into panels, allowing you to hide content off-canvas on smaller screens.

Left panel
Right panel
Top panel
Bottom panel

Block Grid

The block grid functions much like it did in Foundation 5.

Off-canvas

Off-canvas containers sit at the root level of your app to the left, right, top, or bottom. They are similar to panels, except the entire frame of your app shifts to display the off-canvas menu.

Action Sheet

On medium-sized screens and up, these are your standard dropdown menu. On smaller screens they transform into action sheets that pull up from the bottom of the screen.

Title Bar

The title bar is a navigational component which can contain a title area or a number of links. It's flexible enough to allow for center-, left-, and right-aligned sections, or any combination of the three.

Article Back Share

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quisquam odio sint numquam aliquam pariatur fugit debitis illo exercitationem. Nemo nulla dolores quia assumenda, aspernatur molestiae deleniti enim ut quas!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga odit repellat corporis, quos qui provident. Voluptatum quasi, beatae error provident soluta iusto a minus rerum omnis quidem facilis officia expedita?

Menu Bar

The menu bar is an all-purpose nav menu that can include text or icon nav items and be oriented horizontally or vertically depending on screen size.

Tabs

Tabs are a great option for showing content when needed and hiding it when not. We have basic tab styles, but the tab functionality can be added to other components like icon bar and button groups.

Item 1
Item 2
Item 3
Item 2
Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero iusto veniam aut voluptatem itaque libero commodi, quod asperiores eaque cumque sequi sunt facilis accusantium quae atque provident, nobis. Pariatur, laudantium.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero iusto veniam aut voluptatem itaque libero commodi, quod asperiores eaque cumque sequi sunt facilis accusantium quae atque provident, nobis. Pariatur, laudantium.

Modals

Modals will resemble the Reveal modals used in Foundation 5, but with more options for animation and positioning.

Open Modal

Notifications

Notifications can be displayed in any corner of the screen, and can also tap into the Notifications API, if the user's browser supports it, allowing the use of desktop notifications.

Fire Notification

Buttons

Buttons are as button-ey as they've always been. They come in small, medium, large, and expanded varieties, and a rainbow of colors.

Button Secondary Button Success Button Warning Button Alert Button Small Button Large Button Dropdown Button Expaaaaaaaaand Button

Button Groups

Button groups can function as a strip of buttons, a tabstrip, or a segmented control.



Tabs

Tabs are a great option for showing content when needed and hiding it when not. We have basic tab styles, but the tab functionality can be added to other components like icon bar and button groups.

Item 1
Item 2
Item 3
Item 4
Item 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero iusto veniam aut voluptatem itaque libero commodi, quod asperiores eaque cumque sequi sunt facilis accusantium quae atque provident, nobis. Pariatur, laudantium.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero iusto veniam aut voluptatem itaque libero commodi, quod asperiores eaque cumque sequi sunt facilis accusantium quae atque provident, nobis. Pariatur, laudantium.

Accordion

Accordions are a great option for showing content when needed and hiding it when not. We have basic accordion styles, but the accordion functionality can be added to other components like lists.

Item 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero iusto veniam aut voluptatem itaque libero commodi, quod asperiores eaque cumque sequi sunt facilis accusantium quae atque provident, nobis. Pariatur, laudantium.

Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero iusto veniam aut voluptatem itaque libero commodi, quod asperiores eaque cumque sequi sunt facilis accusantium quae atque provident, nobis. Pariatur, laudantium.

Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero iusto veniam aut voluptatem itaque libero commodi, quod asperiores eaque cumque sequi sunt facilis accusantium quae atque provident, nobis. Pariatur, laudantium.

Cards

Cards are generic, flexible containers that can hold images, videos, text, lists, buttons, and more.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

Block lists

Block lists are basic list views that resemble the kind you see on most mobile platforms. They can include labels, forms, switches, and more.

×
This is a test modal!