Foundation: Misc Elements Demo

Back to Tutorial

---

Visibility Classes

(Try resizing your browser)

• show-for-xlarge triggered
• show-for-large triggered
• show-for-large-up triggered
• show-for-medium triggered
• show-for-medium-down triggered
• show-for-small triggered
• hide-for-xlarge triggered
• hide-for-large triggered
• hide-for-large-up triggered
• hide-for-medium triggered
• hide-for-medium-down triggered
• hide-for-small triggered
• show-for-landscape triggered
• show-for-portrait triggered
• show-for-touch triggered
• hide-for-touch triggered

Alerts

Labels

Here's a regular label, a radius label, a round label, a secondary label, an alert label, and a success label.

Tooltips

(Hover your mouse over the text, or tap on the text)

Here's a standard tooltip, a Foundation-enhanced tooltip, a square-cornered tooltip, a top-aligned tooltip, a left-aligned tooltip, a right-aligned tooltip, and a custom-width tooltip.

Accordion

• Block #1 Title

  Block #1 Content: 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.

• Block #2 Title

  Block #2 Content: 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.

• Block #3 Title

  Block #3 Content: 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.

Panels