--- name: home url: /home ---
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 InterrobangOr visit the playground where everything is angular based:
Visit the PlaygroundOur 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 docsBlock
Block
Block
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.
The block grid functions much like it did in Foundation 5.
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.
Top off-canvas
Bottom off-canvas
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.
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.
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?
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 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.
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 will resemble the Reveal modals used in Foundation 5, but with more options for animation and positioning.
Open ModalNotifications 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 NotificationButtons 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 ButtonButton groups can function as a strip of buttons, a tabstrip, or a segmented control.
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.
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.
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.
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.
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 are generic, flexible containers that can hold images, videos, text, lists, buttons, and more.
The most basic elements in the Foundation for Apps grid are the Group and Block.
The most basic elements in the Foundation for Apps grid are the Group and Block.
Block lists are basic list views that resemble the kind you see on most mobile platforms. They can include labels, forms, switches, and more.