Accordion


Accordion Menu


Badge

2
3
A
B


Blockquote

This is a quotation taken from the Mozilla Developer Center.



Button

Learn More
View All Features



So Tiny
So Small
So Large
Such Expand


Callout

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.

This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It’s dangerous to go alone, take this.


Close Button

This is a static close button example.

Flex Video


Label

Secondary Label
Success Label
Alert Label
Warning Label


Media Object

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.


Motion UI

This panel fades.

This panel slides.



Numbered List

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

Pagination


Progress Bar

25%

50%

75%

Native progress: As an alternative to our custom progress bar style, you can also opt to use the native <progress> element. It provides a more succinct way to create progress bars, but it’s not supported in IE9, and some other older browsers. View <progress> element support.

 

Native meter: For the extra adventurous developers out there, we also provide styles for the <meter> element. What’s the difference? <progress> represents a value that changes over time, like storage capacity. <meter> represents a value that fluctates around some optimum value. It also has no support in Internet Explorer, Mobile Safari, or Android 2. View <meter> element support.




Reveal

Click me for a basic modal

Click me for a full-screen modal

This is a basic modal

Using hipster ipsum for dummy text

Stumptown direct trade swag hella iPhone post-ironic. Before they sold out blog twee, quinoa forage pour-over microdosing deep v keffiyeh fanny pack. Occupy polaroid tilde, bitters vegan man bun gentrify meggings.

Full screen modal

Intropsective Cage


Switch





Tabs

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


Leave a Reply

You must be logged in to post a comment.