The objective of the Metro pattern library is to document visual language, such as header styles and color palettes, used to create the Metro website, and provide guidance for future web design and development work on Metro’s website. It contains real working examples, code snippets, documentation, style guidelines for UI components.
The Metro style guide for digital services is the parent of this section that documents the design system for digital services. Its audience is broader: any discipline, any employee or contractor making online artifacts or using the design system. That is where to find design principles and guidelines covering areas like voice and tone, writing and accessibility, photography, iconography, and browser support.
In the pattern library, expand an item's downarrow for usage guidelines and an html snippet containing the markup to make the object.
This is version 0.80 dated Jan 9, 2019
Primary font: "adelle", "Palatino Linotype", "Book Antiqua", Palatino, serif;
Primary font italic: "adelle", "Palatino Linotype", "Book Antiqua", Palatino, serif;
Primary font bold; "adelle", "Palatino Linotype", "Book Antiqua", Palatino, serif;
Primary alternate font: "adelle-condensed", "Palatino Linotype", "Book Antiqua", Palatino, serif;
Primary alternate font italic: "adelle-condensed", "Palatino Linotype", "Book Antiqua", Palatino, serif;
Primary alternate font bold; "adelle-condensed", "Palatino Linotype", "Book Antiqua", Palatino, serif;
Secondary font: "adelle-sans", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
Secondary font italic: "adelle-sans", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
Secondary font bold: "adelle-sans", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
Secondary alternate font: "AdelleSansCondensed", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
Secondary alternate font italic: "AdelleSansCondensed", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
Secondary alternate font bold: "AdelleSansCondensed", "Avenir Next", "AvenirNext-Regular", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
This text is hidden on smaller screens
This text is only visible on smaller screens
This text is hidden on medium screens only
This text is only visible on medium screens
This text is hidden on large screens
This text is only visible on large screens
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
Subscript for things like H2O
This small text is small for for fine print, etc.
Abbreviation: HTML
Keyboard input: Cmd
This text is a short inline quotation
This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
This is what inline code looks like.
This is sample output from a computer program
The variable element, such as x = y
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Bobstay jackstaff ensign forestay holystone outhaul quartering starbolins whipstaff. Bitts bobstay burgee deadeye jack-block lastage mainsheet oakum sheer sternpost transire tuck wear.
dl.dl.| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.Quote source
The intro text is the lead-in to a news story body text, or it may just be used to create a visual distinction between the rest of a passage of text.
Bobstay jackstaff ensign forestay holystone outhaul quartering starbolins whipstaff. Bitts bobstay burgee deadeye jack-block lastage mainsheet oakum sheer sternpost transire tuck wear.
Lorem ipsum dolor sit amet, consectetur. (56 characters)
Bobstay jackstaff ensign forestay holystone outhaul quartering starbolins whipstaff. Bitts bobstay burgee deadeye jack-block lastage mainsheet oakum sheer sternpost transire tuck wear.
Cordage davit earing figurehead gaff gaff-topsail grapnel hawser holystone jack-cross-tree lazaret mainsail painter sidelight skeg stay stern sternpost topsail trice trunnel. Boltrope careen demurrage figurehead fluke forefoot foremast futtock grapnel helm jack luff lugsail patroon steeve strake timberhead trysail yard.
Ipsum dolor sit (26 chars)
Bobstay jackstaff ensign forestay holystone outhaul quartering starbolins whipstaff. Bitts bobstay burgee deadeye jack-block lastage mainsheet oakum sheer sternpost transire tuck wear.
