Version 0.40.0

UI Layouts

App layout

App layout navigation modifiers

You can add the following modifier at the app layout (.sui-l-app-layout) level.

Modifier Breakpoints Description Interaction element
as--expand-nav Less than 800px Navigation shrinked by default and can be expand sui-o-topbar__button as--toggle-menu in .sui-o-topbar
as--shrink-nav More than 800px Navigation expanded by default and can be shrink sui-o-secondary-nav__toggle in .sui-o-secondary-nav
Platform My Platform
Staging environment - Switch environment
atoms/icons/apps/project-apps
Page title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad assumenda, aut doloremque perferendis porro qui reprehenderit tempore vitae voluptatem. Ad animi blanditiis laboriosam laudantium nam officiis quaerat vitae, voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquid architecto consequatur culpa deleniti, distinctio dolorem earum eum illum inventore magni maxime, modi provident, quasi tempore unde. Hic, repellat?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquid architecto consequatur culpa deleniti, distinctio dolorem earum eum illum inventore magni maxime, modi provident, quasi tempore unde. Hic, repellat?

<div class="sui-l-app-layout">
    <div class="sui-o-topbar">
        ...
    </div>

    <div class="sui-o-primary-nav">
        ...
    </div>

    <div class="sui-l-app-layout__subapp">
        <div class="sui-o-secondary-nav">
            ...
        </div>

        <div class="sui-l-app-layout__main">
            <div class="sui-l-app-layout__message as--warning">
                Staging environment - <a href="#">Switch environment</a>
            </div>

            <div class="sui-l-app-layout__page">
                <div class="sui-l-app-layout__page-scroll">

                    <div class="sui-l-container as--gutter-xl@sm">
                        <div class="sui-l-page-header">
                            ...
                        </div>
                        ...
                    </div>

                </div>
            </div>
        </div>
    </div>


</div>

Focus mode for Add/Edit something

Platform My Platform
Staging environment - Switch environment
Add something

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad assumenda, aut doloremque perferendis porro qui reprehenderit tempore vitae voluptatem. Ad animi blanditiis laboriosam laudantium nam officiis quaerat vitae, voluptates?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquid architecto consequatur culpa deleniti, distinctio dolorem earum eum illum inventore magni maxime, modi provident, quasi tempore unde. Hic, repellat?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquid architecto consequatur culpa deleniti, distinctio dolorem earum eum illum inventore magni maxime, modi provident, quasi tempore unde. Hic, repellat?

<div class="sui-l-app-layout as--focus-mode">
    <div class="sui-o-topbar">
        ...
    </div>

    <div class="sui-o-primary-nav">
        ...
    </div>

    <div class="sui-l-app-layout__subapp">
        <div class="sui-o-secondary-nav">
            ...
        </div>

        <div class="sui-l-app-layout__main">
            <div class="sui-l-app-layout__message as--warning">
                Staging environment - <a href="#">Switch environment</a>
            </div>

            <div class="sui-l-app-layout__page">
                <div class="sui-l-app-layout__page-scroll">

                    <div class="sui-l-container as--gutter-xl@sm as--size-sm">
                        <div class="sui-l-page-header">
                            ...
                        </div>
                        ...
                    </div>

                </div>
            </div>

            <div class="sui-l-app-layout__page-footer">

                <div class="sui-l-container as--size-sm as--gutter-lg">
                    <div class="sui-g-grid as--auto as--middle as--center">
                        <div class="sui-g-grid__item as--full as--auto@xs sui-h-text-center">
                            <div class="sui-a-step-indicator as--step-3">
                                <span class="sui-a-step-indicator__step"></span>
                                <span class="sui-a-step-indicator__step"></span>
                                <span class="sui-a-step-indicator__step"></span>
                                <span class="sui-a-step-indicator__step"></span>
                                <span class="sui-a-step-indicator__step"></span>
                            </div>
                        </div>
                        <div class="sui-g-grid__item as--pull@xs">
                            <button class="sui-a-button">
                                Back
                            </button>
                        </div>
                        <div class="sui-g-grid__item as--push@xs">
                            <button class="sui-a-button as--primary">
                                Continue
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


</div>