Conceptual Docs UI Components Preview (this is an h1)

Author Name
  • Author Name
  • Author Name
  • Author Name

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.

Dr. Seuss


This is a link.



Deploy to Cloud


Deploy to Cloud




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:

Lists can also be mixed:

Footnotes & Superscript

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

  1. Boom!


Subscript looks like this: Chex = 12dec = 14oct


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

See top of document


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


Oh me! Oh my! Oh me! Oh my! What a lot of funny things go by.


I meant what I said, and I said what I meant. An elephant’s faithful, one hundred percent! And it should be, it should be, it SHOULD be like that! Because Horton was faithful! He sat and he sat!

“My goodness! My gracious!” they shouted. “MY WORD! It’s something brand new! IT’S AN ELEPHANT-BIRD!!”


So be sure when you step. Step with care and great tact, and remember that:

  • Life’s a
  • Great
  • Balancing
  • Act

If we didn’t have birthdays, you wouldn’t be you. If you’d never been born, well then what would you do? If you’d never been born, well then what would you be? You might be a fish! Or a toad in a tree! You might be a doorknob! Or three baked potatoes! You might be a bag full of hard green tomatoes. Or worse than all that… why, you might be a WASN’T! A Wasn’t has no fun at all. No, he doesn’t. A Wasn’t just isn’t. He just isn’t present. But you… you ARE YOU! And, now isn’t that pleasant!

Code Blocks

A caption can be at the top of the code block.
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))
      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.
A caption can also be at the bottom of the code block.



Animated GIF



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.

Optional table caption
Style Supported In Table?
Bold text Yes
Italicized text Yes
Striked out text Yes
Inline code Yes
Links Yes
Lists, Alerts, Code Blocks, Images, Videos, Buttons No


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