Conceptual Docs UI Components Preview (this is an h1)

Minky

Dec 17 2015 3 min

• 
• 
• 

• Pick an option

  Option A Option B
• And another

  Option C Option D
• Button

This document demonstrates all the UI components supported within conceputal and reference docs. For example, this is a paragraph.

Headings (this is an h2) & Layout

This is an H3.

This is an H4.

This is an H5.

This is an H6.

This is a horizontal rule:

Text Styles

Text can be bolded, italicized, and striked out.

You can describe text within product UI like this: Click Add Attendees, and then type the recipients' names, email addresses, or resource names (separated by semicolons) in the Required, Optional, or Resources boxes.

Inline code can be highlighted and also styled as a link: The value returned by the strlen or wcslen functions does not necessarily equal String.Length.

Finally, you can add lightweight defintions to words and phrases: Hover over this for the definition of the word definition.

Block Quotes

Unless someone like you
Cares a whole awful lot,
Nothing is going to get better.
It’s not.

Links

Regular

This is a link.

Buttons

Small

Default

Big

Disabled

Lists

Lists can be ordered:

1. Hey diddle diddle,
2. The cat and the fiddle
3. The...
   1. Cow
   2. Jumped over
   3. The
   4. Moon.

Lists can also be unordered:

• The little dog laughed,
• To see such fun.
• And the...
  • Dish
  • Ran away
  • With the
  • Spoon

Lists can also be mixed:

• Baa, baa, black sheep,
• Have you any wool?
• Yes, sir, yes, sir,
• Three bags full:
  1. One for the master,
  2. And one for the dame,
  3. And one for the little boy
• Who lives down the lane.

Footnotes & Superscript

Superscript looks like this: 1^st, 2^nd, 3^rd. You can also use superscript numbers¹ to create footnotes.

1. Boom!

Subscript

Subscript looks like this: C_hex = 12_dec = 14_oct

Selectors

Use a Switch to let the user select one of two options, or even a permutation of options:

See top of document

Alerts

Can contain text styles and lists. Optimize for readability and keep them concise.

Code Blocks

using System;

public class Example
{
   public static void Main()
   {
      string s1 = "This string consists of a single short sentence.";
      int nWords = 0;

      s1 = s1.Trim();      
      foreach (var ch in s1) {
         if (Char.IsPunctuation(ch) | Char.IsWhiteSpace(ch))
            nWords++;              
      }
      Console.WriteLine("The sentence\n   {0}\nhas {1} words.",
                        s1, nWords);                                                                     
   }
}
// The example displays the following output:
//       The sentence
//          This string consists of a single short sentence.
//       has 8 words.

Images

Regular

Animated GIF

Videos

Tables

Tables must be used thoughtfully in order to be responsive and readable across all platforms and form factors. Only use tables to visualize data that is truly tabular in nature.

Step-by-step

For step-by-step tutorials, you may optionally include the step-by-step UI component at the bottom of the article.