UI Elements

Need tabs, tables, or other common UI elements?
Yeah, we got that.

---

Alerts

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like anything else in Foundation, easy to customize.

---

Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a span element with a class of .label. The border styling mirrors that of the Foundation buttons.

Added 01/19 This paragraph has an inline label to let you know that it was added on January 19, 2012 courtesy of Thomas Klemm. Thanks man!

---

Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platfrom and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the has-tip class to any element, as long as you assign it a unique ID.

By default the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element.In a mobile environment the tooltips are full width and bottom aligned.

---

Panels

A panel is a simple, helpful css class that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section (for example the download box on the right).

---

Tabs

Note: The third tab is using the mobile visibility classes to hide on small devices.

Simple Tabs

Simple Tab 1

Simple Tab 2

Simple Tab 3

• This is simple tab 1's content. Pretty neat, huh?
• This is simple tab 2's content. Now you see it!
• This is simple tab 3's content. It's only okay.

---

Contained Tabs

Contained tabs have a simple added class of 'contained' on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs, and the padding on that container (by default) is one column on each side. That means you can still use standard column sizes inside a tab element.

Simple Tab 1

Simple Tab 2

Simple Tab 3

• This is simple tab 1's content. Pretty neat, huh?
• This is simple tab 2's content. Now you see it!
• This is simple tab 3's content. It's only okay.

---

Nice Tabs

Need something a little fancier? Nice tabs have some sweet default styling and can add a little polish to a prototype (or documentation). They can be both standard and contained, just like the simple tabs.

Nice Tab 1

Nice Tab 2

Nice Tab 3

• This is simple tab 1's content. Pretty neat, huh?
• This is simple tab 2's content. Now you see it!
• This is simple tab 3's content. It's only okay.

---

Vertical Tabs

You can also use tabs in a vertical configuration by adding a class of 'vertical' to the DL element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.

Vertical Tab 1

Vertical Tab 2

Vertical Tab 3

Tabs can also work as a normal CMenu widget, this page for example uses the following code for its left-side menu

---

Mobile Tabs

To demonstrate how mobile navigation can work, adding a class of 'mobile' to a tab group will switch them (at small resolutions) to full width nav bars.

---

Nav Bar

If you need a more traditional nav bar with dropdowns, you can use this sucka. The dropdowns are optional - omitting the flyout element and .has-flyout class means it will act as a standard link. The flyouts can hold arbitrary content, including grid objects, and have three sizes (.small, standard, and .large).

Note: In IE7 the dropdowns are obscured by the code snippet below. This is due to IE7s iframe z-index bug, and is not an issue with the dropdowns themselves. Try not to have dropdown elements over an iframe.

• Nav Item 1
• Nav Item 2

  Small Example (200px)

  This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

• Nav Item 3

  Medium Example (400px)

  This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

  This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

• Nav Item 4

  Large Example (600px)

  This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

  This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

  This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

  This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

  

You can also drop inputs into the nav in place of an anchor. Here you can see a search input.

• Nav Element
  • This is a link in a UL.
  • This is a link in a UL.
  • This is a link in a UL.

---

Sub Nav

If you need to provide simple and effective on-page navigation, to either jump to content on the page or flip to another view then use this awesome little sub-nav.

Filter:

All

Active

Pending

Suspended

---

Pagination

Breaking stuff up into pages? Yeah you are. Here's some pagination to get you started.

• ««
• «
• 1
• 2
• 3
• 4
• 5
• 6
• »
• »»

---

Breadcrumbs

Walking through a linear flow, or want to show where someone is in the hierarchy? Breadcrumbs are totally boss.

Breadcrumbs are built with a UL just like pagination, and they can support span or anchor elements with 'current' and 'unavailable' classes.

• Home
• Features
• Gene Splicing
• Home

• Home
• Features
• Gene Splicing
• Home

---

Tables

Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).

Table Header	Table Header	Table Header	Table Header
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content

---

Video

If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

4:3

Widescreen

Vimeo

• 4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.
• By adding a class of .widescreen we change the ratio to 16:9, ideal for more recent video and most popular YouTube or Vimeo embeds.
• Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only - no extra padding for the controls.

---

Microformats

Microformats are formats for data objects represented on the page using standard HTML. By applying specific classes to objects parsers like the operator plugin can detect relevant data and display it. This can be especially handy for contact info, events, locations and news articles. We've supplied some base styling for microformats, as well as the relevant markup.

hCard

hCards are a microformat for contact information. We've represented the correct syntax here to ensure they are machine readable, as well as applied some minimal styling.

• John T. Yeti
• Yeti
• Foundation, Inc.
• 408-867-5309
• http://foundation.zurb.com/

hCalendar

An hCalendar event is an iCalendar formatted entry for an event at a specific time and location. This can be interpreted by parsing tools to recognize events and add them to a calendar.

The Foundation Launch Party was on October 13 2011 from 2–4pm at ZURB HQ (More Info)