ui-toolkit


Buttons

Switches

Shiny Happy Indigo Plants

Checks

Lasers Sharks Ninjas

Flags

Tabs

Making Money Saving Money Other

Inputs

Typeaheads

Last Selection

Pages

Make!

Let's make some change

Save!

Let's save some whales

Sidebar

Hit the hamburger in the upper left.

Overlays

A
B

Sparklines

sparking trends and more

Tooltips

I am some seriously content, hover over me.

This tip is the !

Toolbars

Resizers

Rock Hard Place

Navigation

  • Fruit

  • Vegetables

  • Meats

  • Apple

  • Pear

  • Banana

  • Carrot

  • Tomato

  • Kale

  • Veal

  • Salmon

  • Duck

Great Choice!

Loader Progress

Look up :)

Start Stop

Toast Messages

You are indeed a fine human being! Toast Me!

Modals

Click for a dialog

Clicking To Dismiss

Yes, this is just content to put in folks face, and by default if a click bubbles through it -- bye!

Hotkeys

Press Shift+/ for an awesome alert!

Press Control+B to trigger the bomb from the toolbar above!

Press Alt+B to trigger the burger from the toolbar above!

Typography

<h1> - Main Page, Use Once


<h2> - Sections


<h3> - SubSections


<h4> - Details


<h5> - Anyone Every Use This?

<h6> - This Was a Mystery to Me!

<p>All paragraphs are wrapped in p tags. Additionally, p elements can be wrapped with a blockquote element if the p element is indeed a quote. Historically, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes.


<h1>Link Heading


Lists

Pills

Pill - standalone (no parent)

Doge Food

Data Bound pills

Code

var x = 'I am a var'; console.log(x); Ohh! Markup!

Markdown

Here is some **markdown** * and * a * list Woot! Even code! ```javascript var x = 'I am a var'; console.log(x); ``` And of course `$ shell commands` and `var x = 'yes'` inline code.

Tiler

##Standard Attributes Making the elements consistent with a set of standard `attributes` and `events`. Here's the basic list.