Layout examples

The layout provides the basic structure of an app and is used in every page to get a consistent look & feel.

Different regions in Layout

There are different regions a layout can make use of. For example, you can have a layout without a leading or a context region.

JavaScript in example markup

The JavaScript code present in the example markup is used to show how to toggle regions, modes and features. Please make sure to implement your own solution to toggle regions, etc. depending on your tech stack.

To see a detailed explanation of all existing helper classes, please refer to the usage table below and inspect the samples in action with your developer tools.

Layout image 2

Layout with sample content and functionality

This layout contains all regions as well as sample content and functionality.

Layout with sample content and functionality

<div class="appWrapper">

    <div class="appWrapper__regions has-appBar has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">

        <section class="leadingRegion">
            <div class="listNavigation">
                <div class="listNavigation__lists">
                    <div class="listNavigation__header">
                        Very simple List navigation
                    </div>
                    <ul class="listNavigation__list">
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__icon">
                                    <span class="iconMdsp person" aria-hidden="true"></span>
                                </div>
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is a status set to indicate something important.</div>
                                </div>
                                <div class="item__metaInfo">
                                    <span class="iconMdsp star has-color-accentTealDark" aria-hidden="true"></span>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__icon">
                                    <span class="iconMdsp person" aria-hidden="true"></span>
                                </div>
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item and there is a status set to indicate something important.</div>
                                </div>
                                <div class="item__metaInfo">
                                    <span class="iconMdsp exclamationDiamond black has-color-functionalYellow" aria-hidden="true"></span>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                        <li class="list__item">
                            <a href="#" class="item__link">
                                <div class="item__content">
                                    <h4 class="label">List item A</h4>
                                    <div class="description">This is a list item. There is no icon or status indicator set.</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="mainRegion">

            <div class="contentHeader">
                <div class="contentHeader__header">
                    <h1 class="header__headline">Page Title</h1>
                    <div class="header__subline">Optional subline</div>
                </div>

                <div class="contentHeader__actions">
                    <button class="button--secondaryContentAction">
                        <span class="iconMdsp addCircle" aria-hidden="true"></span>
                        Add Button
                    </button>

                    <a class="button button--secondaryContentAction" href="#">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                        Edit Link
                    </a>

                    <a class="button button--secondaryContentAction" href="#">
                        <span class="iconMdsp delete" aria-hidden="true"></span>
                        Delete Link
                    </a>
                </div>
            </div>

            <button class="button button--secondary" id="toggleLeadingRegionDemo">
                Toggle visibility of leading region
            </button>

            <button class="button button--secondary" id="toggleContextRegionDemo">
                Toggle visibility of context region
            </button>

            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>

        </section>

        <section class="contextRegion">
            <button class="button button--secondary" id="toggleSlidingBehaviour">
                Toggle sliding behaviour for demo
            </button>

            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>
            <p>Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet Lorem ipsum dolor it amet .</p>

        </section>

        <aside class="leadingRegionToggleArea">
            <a href="#"></a>
        </aside>

        <aside class="contextRegionToggleArea">
            <a href="#"></a>
        </aside>

    </div>

    <ul class="appWrapper__appBar">
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp person" aria-hidden="true"></span>
                <span class="item__title">Lorem</span>
            </a>
        </li>
        <li class="appBar__item is-activated">
            <a href="#">
                <span class="iconMdsp calendarDay" aria-hidden="true"></span>
                <span class="item__title">Ipsum</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp aspects" aria-hidden="true"></span>
                <span class="item__title">Dolor sit</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp asset" aria-hidden="true"></span>
                <span class="item__title">Amet tempor aliquam quctor</span>
            </a>
        </li>
        <li class="appBar__item is-disabled">
            <a href="#">
                <span class="iconMdsp calendar" aria-hidden="true"></span>
                <span class="item__title">Morbi et lobortis lacus sed tempor</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp globalSettings" aria-hidden="true"></span>
                <span class="item__title">Lobortis lacus sed tempor</span>
            </a>
        </li>
    </ul>

    <div class="appWrapper__mobileToggle">
        <a href="#" class="leadingRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
        <a href="#" class="contextRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
    </div>

</div>


<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
    _msb.init({
        title: "App Layout",
        showLegal: true,
        polyfills: {
            promise: true
        }
    });

    window.onload = function(e){
        var leading = document.querySelectorAll("a.leadingRegionToggle, .leadingRegionToggleArea > a");
        var context = document.querySelectorAll("a.contextRegionToggle, .contextRegionToggleArea > a");
        var regionsWrapper = document.querySelector(".appWrapper__regions");

        for (var i=0; i < leading.length; i++) {
            leading[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('leadingRegion-is-expanded');
                for (var j=0; j<leading.length; j++) {
                    leading[j].classList.toggle('is-activated');
                }
            });
        }

        for (var i=0; i < leading.length; i++) {
            context[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('contextRegion-is-expanded');
                for (var j=0; j<context.length; j++) {
                    context[j].classList.toggle('is-activated');
                }
            });
        }

        var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
        switchLayoutType.addEventListener('click', function() {
            regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
        });

        var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
        toggleLeading.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-leadingRegion');
        });

        var toggleContext = document.querySelector("#toggleContextRegionDemo");
        toggleContext.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-contextRegion');
        });
    }
</script>

Layout image 2

Empty layout with all regions

This layout contains all regions (including the App bar), without any content.

Empty layout with all regions

<div class="appWrapper">

    <div class="appWrapper__regions has-appBar has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">

        <section class="leadingRegion">
        <!-- content for leading region goes here -->
        </section>

        <section class="mainRegion">
        <!-- content for main region goes here -->
        </section>

        <section class="contextRegion">
        <!-- content for context region goes here -->
        </section>

        <aside class="leadingRegionToggleArea">
            <a href="#"></a>
        </aside>

        <aside class="contextRegionToggleArea">
            <a href="#"></a>
        </aside>

    </div>

    <ul class="appWrapper__appBar">

        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp person" aria-hidden="true"></span>
                <span class="item__title">Lorem</span>
            </a>
        </li>
        <li class="appBar__item is-activated">
            <a href="#">
                <span class="iconMdsp calendarDay" aria-hidden="true"></span>
                <span class="item__title">Ipsum</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp aspects" aria-hidden="true"></span>
                <span class="item__title">Dolor sit</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp asset" aria-hidden="true"></span>
                <span class="item__title">Amet tempor aliquam quctor</span>
            </a>
        </li>
        <li class="appBar__item is-disabled">
            <a href="#">
                <span class="iconMdsp calendar" aria-hidden="true"></span>
                <span class="item__title">Morbi et lobortis lacus sed tempor</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp globalSettings" aria-hidden="true"></span>
                <span class="item__title">Lobortis lacus sed tempor</span>
            </a>
        </li>

    </ul>

    <div class="appWrapper__mobileToggle">
        <a href="#" class="leadingRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
        <a href="#" class="contextRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
    </div>

</div>

<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
    _msb.init({
        title: "App Layout",
        showLegal: true,
        polyfills: {
            promise: true
        }
    });

    window.onload = function(e){
        var leading = document.querySelectorAll("a.leadingRegionToggle, .leadingRegionToggleArea > a");
        var context = document.querySelectorAll("a.contextRegionToggle, .contextRegionToggleArea > a");
        var regionsWrapper = document.querySelector(".appWrapper__regions");

        for (var i=0; i < leading.length; i++) {
            leading[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('leadingRegion-is-expanded');
                for (var j=0; j<leading.length; j++) {
                    leading[j].classList.toggle('is-activated');
                }
            });
        }

        for (var i=0; i < leading.length; i++) {
            context[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('contextRegion-is-expanded');
                for (var j=0; j<context.length; j++) {
                    context[j].classList.toggle('is-activated');
                }
            });
        }

        var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
        switchLayoutType.addEventListener('click', function() {
            regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
        });

        var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
        toggleLeading.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-leadingRegion');
        });

        var toggleContext = document.querySelector("#toggleContextRegionDemo");
        toggleContext.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-contextRegion');
        });
    }
</script>

Layout image 2

Empty layout without App bar

This layout contains all regions (without the App bar) without any content.

Empty layout without App bar

<div class="appWrapper">

    <div class="appWrapper__regions has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">

        <section class="leadingRegion">
        <!-- content for leading region goes here -->
        </section>

        <section class="mainRegion">
        <!-- content for main region goes here -->
        </section>

        <section class="contextRegion">
        <!-- content for context region goes here -->
        </section>

        <aside class="leadingRegionToggleArea">
            <a href="#"></a>
        </aside>

        <aside class="contextRegionToggleArea">
            <a href="#"></a>
        </aside>

    </div>
    <div class="appWrapper__mobileToggle">
        <a href="#" class="leadingRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
        <a href="#" class="contextRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
    </div>

</div>

<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
    _msb.init({
        title: "App Layout",
        showLegal: true,
        polyfills: {
            promise: true
        }
    });

    window.onload = function(e){
        var leading = document.querySelectorAll("a.leadingRegionToggle, .leadingRegionToggleArea > a");
        var context = document.querySelectorAll("a.contextRegionToggle, .contextRegionToggleArea > a");
        var regionsWrapper = document.querySelector(".appWrapper__regions");

        for (var i=0; i < leading.length; i++) {
            leading[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('leadingRegion-is-expanded');
                for (var j=0; j<leading.length; j++) {
                    leading[j].classList.toggle('is-activated');
                }
            });
        }

        for (var i=0; i < leading.length; i++) {
            context[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('contextRegion-is-expanded');
                for (var j=0; j<context.length; j++) {
                    context[j].classList.toggle('is-activated');
                }
            });
        }

        var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
        switchLayoutType.addEventListener('click', function() {
            regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
        });

        var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
        toggleLeading.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-leadingRegion');
        });

        var toggleContext = document.querySelector("#toggleContextRegionDemo");
        toggleContext.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-contextRegion');
        });
    }
</script>

Usage

ElementClassDescription
.appWrapper__regions .has-appBar Moves the regions to the right so that there is enough space for an app bar on the left.
If this class is not present, the leading or main region starts at the very left of the browser window.
.appWrapper__regions .has-leadingRegion Sets the layout for a leading region on the left. If not set, the leading region will not be shown, even if it is present in the markup.
.appWrapper__regions .has-contextRegion Sets the layout for a context region on the right. If not set, the context region will not be shown, even if it is present in the markup.
.appWrapper__regions .leadingtRegion-is-expanded Changes the layout such that the leading region is visible and the other regions react accordingly. Use this class to show/toggle the leading region.
.appWrapper__regions .contextRegion-is-expanded Changes the layout such that the context region is visible and the other regions react accordingly. Use this class to show/toggle the context region.
.appWrapper__regions .appWrapper__regions--pushLayout Sets the layout algorithm such that for tablets in portrait mode (and above) leading region and context region 'share' the available space (= main region uses whats left of leading and context region).
Default behaviour without this class is that the leading and context region 'overlay' the main region.
.leadingRegion, .contextRegion .leadingRegion--hasSpacing, .contextRegion--hasSpacing Adds the same spacing (technically: margin) to the leading / context region as the main region.
Without these classes the regions default to a zero spacing.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top