Microsoft Experts Rules
Index Management Rules to Successful Projects

Do you know how to do something?

Created on 12 Mar 2017 | Last updated by Joanna Feely on 15 Feb 2019 | v5.0

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a heading 2

Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate this is a link dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, this is an external link, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a heading 4 and below is a blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists

  • This is the first item of an unordered list
  • This is the second item of an unordered list
  • This is the third item of an unordered list. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    • This is the first item of an unordered list inside another
    • This is the second item of an unordered list inside another. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    1. This is the first item of an ordered list inside an unordered list
    2. This is the second item of an ordered list inside an unordered list
  1. This is the first item of an unordered list
  2. This is the second item of an unordered list. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  3. This is the third item of an unordered list
    • This is the first item of an unordered list inside an ordered list
    • This is the second item of an unordered list inside an ordered list. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    1. This is the first item of an ordered list inside another
    2. This is the second item of an ordered list inside another

Boxes

This is a <figure> using the class "greybox" with a <div> and no <p> inside - Only text straight in the div. These words are surrounded by a <span> with class "highlight".

Boxes with captions

This is a <figure> using the class "greybox" with a <div> and a <p> and a "bad" caption.

This is a second <p>

Figure: Bad greybox
This is a <figure> using the class "greybox" with a normal caption.
Figure: Normal greybox
This is a <figure> using the class "greybox" with a "good" caption and a long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Figure: Good greybox

Other boxes

This is a <div> using the class "highlight". If used in a <p> it won't get the border and paddings.
This is a <div> using the class "info". Works the same as using a <p>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
This is a <div> using the class "china". Works the same as using a <p>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a <div> using the class "todo". Works the same as using a <p>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Codes

This is a piece of code using <code>. Ideally we should install something like highlightjs.org/ in the future. 
This is a piece of code using <pre>. Ideally we should install something like highlightjs.org/ in the future.

Videos

Check out this video - it's responsive!

Images

Image Alt Text
Figure: Bad figure
Image Alt Text
Figure: Normal figure
Image Alt Text
Figure: OK figure
Image Alt Text
Figure: Good figure
Image Alt Text
Figure: How a smaller image (400px) works with long caption. Full screen on mobile, real width on larger screens
Image Alt Text
Figure: Short caption

Code to achieve the image result

<figure class="image">
    <img src="pic_trulli.jpg" alt="Trulli">
    <figcaption class="bad/ok/good">Here is the caption text</figcaption>
</figure>
Acknowledgements
Adam Cogan
Tags
Scrum Some other tag One more And another