Advanced Components
Reusable components like the ones used by Windows 8 and Windows Phone 8 or later.
Page components basic blocks for standard metro pages
Page header
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
Example page header Subtext for header
<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>
Page header back button
A page header with a left arrow button that should be used to navigate back. It can utilize the h1's default small, element as well most other components (with additional styles).
<div id="nav-bar">
<div class="row">
<div class="span9">
<div id="header-container">
<a id="backbutton" class="win-backbutton" href="#"></a>
<div class="dropdown">
<h1 class="header-dropdown accent-color">Title</h1>
</div>
</div>
</div>
</div>
</div>
Page header with sub-title and back button
A page header with the page title and the application sub-title on top, and with a left arrow button that should be used to navigate back. It can utilize the h1's default small, element as well most other components (with additional styles).
<div id="nav-bar">
<div class="row">
<div class="span9">
<div id="header-container">
<a id="backbutton" class="win-backbutton" href="#"></a>
<h5>Application name</h5>
<div class="dropdown">
<a class="header-dropdown accent-color" href="#">
Page Title
</a>
</div>
</div>
</div>
</div>
</div>
Page header with back button and nav dropdown menu
A page header with the page title, the application sub-title on top, the left arrow button that should be used to navigate back, and the dropdown menu for navigation on other pages.
<div id="nav-bar">
<div class="row">
<div class="span9">
<div id="header-container">
<a id="backbutton" class="win-backbutton" href="#"></a>
<h5>Application name</h5>
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
Title
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Go to another page</a></li>
<li><a href="#">Go to another page</a></li>
<li><a href="#">Go to another page</a></li>
<li class="divider"></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Hero unit
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
<p>
<a class="btn btn-primary btn-large">
Learn more
</a>
</p>
</div>
Application Bar
A bottom app bar that contains transient access to commands relevant to a particular view
Default style
To place a separator line add <hr class="win-command" /> element between commands.
<div class="win-commandlayout">
<a class="win-command" href="#">
<span class="win-commandicon win-commandring icon-home"></span>
<span class="win-label">Home</span>
</a>
<hr class="win-command" />
...
<button class="win-command">
<span class="win-commandicon win-commandring icon-reload"></span>
<span class="win-label">Reload</span>
</button>
...
</div>
Dark style
To have the bar with a dark background add the win-ui-dark.
<div class="win-commandlayout win-ui-dark">
<a class="win-command" href="#">
<span class="win-commandicon win-commandring icon-home"></span>
<span class="win-label">Home</span>
</a>
<hr class="win-command" />
...
<button class="win-command">
<span class="win-commandicon win-commandring icon-reload"></span>
<span class="win-label">Reload</span>
</button>
...
</div>
Pivot Control
Item 1
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Item 2
| Editable Checkboxes |
Readonly Checkboxes |
Project | Duration | Contract Value | Budget Cost | Cost Variance | Location |
|---|---|---|---|---|---|---|---|
| ACME | 440 days | 70.570,00€ | 70.570,00€ | +3000,00 | Milano | ||
| Surface | 140 days | 70.570,00€ | 70.570,00€ | +3000,00 | Milano | ||
| OSX | 440 days | 70.570,00€ | 70.570,00€ | +3000,00 | Milano | ||
| WinRT | 1440 days | 170.570,00€ | 170.570,00€ | -43000,00 | Milano |
Item 3
Some charts thanks to Nick Downie (http://www.chartjs.org/)
Item 4
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<div id="pivot" class="pivot slide">
<div class="pivot-headers">
<a href="#pivot" data-target="0" class="active">Item 1</a>
<a href="#pivot" data-target="1">Item 2</a>
<a href="#pivot" data-target="2">Item 3</a>
<a href="#pivot" data-target="3">Item 4</a>
</div>
<div class="pivot-items">
<div id="pivot-item-1" class="pivot-item active">
<h3>Item 1</h3>
...
</div>
<div id="pivot-item-2" class="pivot-item">
<h3>Item 2</h3>
<p>...</p>
<p>...</p>
</div>
<div id="pivot-item-3" class="pivot-item">
<h3>Item 3</h3>
<p>...</p>
<p>...</p>
</div>
<div id="pivot-item-4" class="pivot-item">
<h3>Item 4</h3>
<p>...</p>
<p>...</p>
</div>
</div>
</div>
Usage
Include the bootmetro-pivot.js alongside the other JS files.
Via data attributes
Activate a modal without writing JavaScript. Set data-target attribute on every header anchor with the index of the related pivot panel as value.
ListView
The ListView control offers a way to present collections of data, referred to as “items”, to users of your app. You can use ListView to produce various layouts, but it may not necessarily be the best option. Guidelines for ListView controls (Windows 8 User experience guidelines)
ListView is intended for items that expose multiple pieces of data. If your items are just a set of short strings, consider using the Select control.
The ListView comes with two “layouts” built into the control: list layout, and grid layout.
To apply the selection check simply add the selected class.
Grid layout
The grid layout always pans horizontally, and items are laid out following a top-to-bottom, then left-to-right reading order.
Media heading
Body text that wraps over two lines. Vivamus elementum semper nisi.
Media heading
Single line. Lorem ipsum sin ut dolorem
Single line. Lorem ipsum sin ut dolorem
Body text that wraps over three lines. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula
Media heading
Body text that wraps over two lines. Vivamus elementum semper nisi.
Media heading
Body text that wraps over two lines, IcoMoon icon on the left.
<div class="listview grid-layout">
<div class="listview-item bg-color-blue">
<div class="pull-left" href="#">
<img class="listview-item-object" data-src="holder.js/60x60">
</div>
<div class="listview-item-body">
<h4 class="listview-item-heading">Media heading</h4>
<p class="two-lines">Body text that wraps over two lines. Vivamus elementum semper nisi.</p>
</div>
</div>
<div class="listview-item bg-color-green">
<div class="pull-left" href="#">
<img class="listview-item-object" data-src="holder.js/60x60">
</div>
<div class="listview-item-body">
<h4 class="listview-item-heading">Media heading</h4>
<p>Single line. Lorem ipsum sin ut dolorem</p>
<p>Single line. Lorem ipsum sin ut dolorem</p>
</div>
</div>
<div class="listview-item bg-color-orange">
<div class="pull-left" href="#">
<img class="listview-item-object" data-src="holder.js/60x60">
</div>
<div class="listview-item-body">
<p class="three-lines">Body text that wraps over three lines. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula</p>
</div>
</div>
<div class="listview-item bg-color-grayLight selected">
<div class="pull-left" href="#">
<img class="listview-item-object" data-src="holder.js/60x60">
</div>
<div class="listview-item-body">
<h4 class="listview-item-heading">Media heading</h4>
<p class="two-lines">Body text that wraps over two lines. Vivamus elementum semper nisi.</p>
</div>
</div>
<div class="listview-item bg-color-blue">
<div class="pull-left" href="#">
<div class="listview-item-object icon-github"></div>
</div>
<div class="listview-item-body">
<h4 class="listview-item-heading">Media heading</h4>
<p class="two-lines">Body text that wraps over two lines, IcoMoon icon on the left.</p>
</div>
</div>
</div>
List layout
List Layouts are single-column only with a top to bottom reading order, and they always pan or scroll vertically.
Media heading
Body text that wraps over two lines. Vivamus elementum semper nisi.
Media heading
Single line. Lorem ipsum sin ut dolorem
Single line. Lorem ipsum sin ut dolorem
Body text that wraps over three lines. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula
Media heading
Body text that wraps over two lines. Vivamus elementum semper nisi.
Media heading
Body text that wraps over two lines, IcoMoon icon on the left.
<div class="listview list-layout"> ... </div>
Alternatives
Bigger ListViews are available, add the big class to the listview and listview-item elements:
Media heading
Subtitle
Body text that wraps over two lines. Vivamus elementum semper nisi.
Media heading
Body text that wraps over two lines, IcoMoon icon on the left.
<div class="listview list-layout big">
<div class="listview-item big bg-color-blue">
<div class="pull-left" href="#">
<img class="listview-item-object" data-src="holder.js/112x112">
</div>
<div class="listview-item-body">
<h4 class="listview-item-heading">Media heading</h4>
<h5 class="listview-item-subheading">Subtitle</h5>
<p class="two-lines">Body text that wraps over two lines. Vivamus elementum semper nisi.</p>
</div>
</div>
<div class="listview-item big bg-color-green">
<div class="pull-left" href="#">
<div class="listview-item-object icon-github"></div>
</div>
<div class="listview-item-body">
<h4 class="listview-item-heading">Media heading</h4>
<p class="two-lines">Body text that wraps over two lines, IcoMoon icon on the left.</p>
</div>
</div>
</div>
Tiles templates
Tiles are the representation of your app on the Start screen. Selecting a tile launches its app. The content shown on your tile can, and ideally should, change regularly, especially if your tile can communicate new, real-time information to your user. Tiles can show a combination of text and images, and a badge to show status. Tiles, badges, and notifications (Windows Store apps documentation)
Important All tiles must be contained in a wrap element with metro class.
Square Tiles Templates
Square App Tile
| Template Name | Description | Tile |
|---|---|---|
| Square App Tile |
AppName
12
|
Text Only Tiles
| Template Name | Description | Tile |
|---|---|---|
| TileSquareBlock | One short string of large block text over a single, short line of bold, regular text. |
22
Text field 2
|
| TileSquareText01 | One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap. |
Header
Text field 1
Text field 2
Text field 3
|
| TileSquareText02 | One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines. |
Header
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
|
| TileSquareText03 | Four strings of regular text on four lines. Text does not wrap. |
Text field 1
Text field 2
Text field 3
Text field 4
|
| TileSquareText04 | One string of regular text wrapped over a maximum of four lines. |
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
|
Image Only Tiles
| Template Name | Description | Tile |
|---|---|---|
| TileSquareImage | One square image that fills the entire tile, no text. |
|
Square peek templates
| Template Name | Description | Tile |
|---|---|---|
| TileSquarePeekImageAndText01 | Top: One square image, no text. Bottom: One header string in larger text on the first line, three strings of regular text on each of the next three lines. Text does not wrap. |
Header
Text field 1
Text field 2
Text field 3
|
| TileSquarePeekImageAndText02 | Top: Square image, no text. Bottom: One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines. |
Header
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
|
| TileSquarePeekImageAndText03 | Top: Square image, no text. Bottom: Four strings of regular text on four lines. Text does not wrap. |
Text field 1
Text field 2
Text field 3
Text field 4
|
| TileSquarePeekImageAndText04 | Top: Square image, no text. Bottom: One string of regular text wrapped over a maximum of four lines. |
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
|
Wide Tiles Templates
Wide App Tile
| Template Name | Description | Tile |
|---|---|---|
| Wide App Tile |
AppName
12
|
Text Only Tiles
| Template Name | Description | Tile |
|---|---|---|
| TileWideText01 | One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap. |
Header
Text field 1
Text field 2
Text field 3
Text field 4
|
| TileWideText02 | One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width. |
Header
Text field 1
Text field 2
Text field 3
Text field 4
Text field 5
Text field 6
Text field 7
Text field 8
|
| TileWideText03 | One string of large text wrapped over a maximum of three lines. |
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula
|
| TileWideText04 | One string of regular text wrapped over a maximum of five lines. |
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
|
| TileWideText05 | Five strings of regular text on five lines. Text does not wrap. |
Text field 1 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
Text field 2 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
Text field 3 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
Text field 4 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
Text field 5 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
|
| TileWideText06 | Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width. |
Text field 1
Text field 2
Text field 3
Text field 4
Text field 5
Text field 6
Text field 7
Text field 8
|
| TileWideText07 | One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider. |
Header
label 1
label 2
label 3
label 4
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
|
| TileWideText08 | Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider. |
label 1
label 2
label 3
label 4
label 5
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
|
| TileWideText09 | One header string in larger text over one string of regular text wrapped over a maximum of four lines. |
Header
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
|
| TileWideText10 | One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText07, but the first column is narrower. |
Header
Viva
Viva
Viva
Viva
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
|
| TileWideText11 | Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText08, but the first column is narrower. |
Viva
Viva
Viva
Viva
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
Vivamus elementum semper nisi
|
Image Only Tiles
| Template Name | Description | Tile |
|---|---|---|
| TileWideImage | One wide image that fills the entire tile, no text. |
|
| TileWideImageCollection | One large square image with four smaller square images to its right, no text. |
|
Image & text templates
Widepeek Tiles Templates
You can combine all the previous tile templates to make a big tile with size of 310 x 300, see some example below:
To build the big tile, simply use an element wrapper with tile widepeek classes:
<a href="#" class="tile widepeek">
<div class="tile wide image collection">
...
</div>
<div class="tile wide text">
...
</div>
</a>
Selecting tiles
To apply the selection check, simply add the selected class.
Color alternatives
To apply a different background color to a tile, you can use the following predefined classes, or make the yours.
| Class name | Example |
|---|---|
bg-color-orange
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-purple
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-green
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-greenDark
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-blue
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-blueDark
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-red
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-yellow
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-pink
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-darken
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-gray
|
Header
Text field 1
Text field 2
Text field 3
|
bg-color-grayLight
|
Header
Text field 1
Text field 2
Text field 3
|