Default page layout

Content
    <div class="page">
        <div class="page-header">
            <div class="page-header-content">
            ...
            </div>
        </div>

        <div class="page-region">
            <div class="page-region-content">
                ...
            </div>
        </div>
    </div>

Secondary page layout

Content
    <div class="page secondary">
        <div class="page-header">
            <div class="page-header-content">
            ...
            </div>
        </div>

        <div class="page-region">
            <div class="page-region-content">
                ...
            </div>
        </div>
    </div>

Fill View

Page Content

    <div class="page fill">
        ...
    </div>

Snapped View

Page Content

    <div class="page snapped">
        ...
    </div>

Fill & Snapped View

Page Content for snapped view page

Page Content for fill view page

    <div class="page snapped">
        ...
    </div>
    <div class="page fill">
        ...
    </div>

Application Bar

Content for app bar

    <div class="app-bar">
        ...
    </div>

Sharms

Content for charms

    <div class="charms">
        ...
    </div>

Flyouts

Message Dialogs

Content for message dialog

    <div class="message-dialog">
        ...
    </div>

Notification Dialogs

Content for message dialog

    <div class="error(info, warning)-bar">
        ...
    </div>