Page layout example@1.0.0

<div class="c-top-app-bar--dark">

  <div class="c-top-app-bar__left">
    <div class="c-top-app-bar__logo">
      <i class="material-icons">arrow_back</i>
    </div>
    <h1 class="c-top-app-bar__title">
      Foo Bar
    </h1>
    <div class="c-top-app-bar__actions">
      <button class="c-icon-button--light">
        <i class="c-icon-button__icon--dark material-icons">edit</i>
        <i class="c-icon-button__icon--dark material-icons">arrow_drop_down</i>
      </button>
    </div>
  </div>

  <div class="c-top-app-bar__right">
    <div class="c-top-app-bar__notifications">
        <div class="c-top-app-bar__notifications-container">
            <p>3</p>
        </div>
    </div>
    <div class="c-top-app-bar__profile-menu material-icons">account_circle</div>
  </div>
</div>
<div class="c-stepper--dark">
    <div class="c-stepper__step">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p class="material-icons">mode_edit</p>
            </div>
        </div>
        <p>Choose activity</p>
        <hr />
    </div>
    <div class="c-stepper__step--active">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>2</p>
            </div>
        </div>
        <p>Choose options</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>3</p>
            </div>
        </div>
        <p>Choose content</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>4</p>
            </div>
        </div>
        <p>Choose assessment</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>5</p>
            </div>
        </div>
        <p>Finalize and publish</p>
        <hr />
    </div>
</div>
<div class="o-page-layout">
    <div class="o-page-layout__cell--4">
        <h5 class="c-typography--headline6">Example UI</h5>
    </div>
    <div class="o-page-layout__cell--4">
        <ul class="c-single-line-list">
            <li class="c-single-line-list__item">
                <i class="c-single-line-list__item-icon material-icons">favorite</i>
                <label for="basic-switch-4">Single line item</label>
                <div class="c-single-line-list__item-control">
                    <div class="c-toggle-switch">
                        <input type="checkbox" id="basic-switch-4" class="c-toggle-switch__control" role="switch" />
                        <div class="c-toggle-switch__background">
                            <div class="c-toggle-switch__knob">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="c-single-line-list__item">
                <i class="c-single-line-list__item-icon material-icons">favorite</i>
                <label for="basic-switch-5">Single line item</label>
                <div class="c-single-line-list__item-control">
                    <div class="c-toggle-switch">
                        <input type="checkbox" id="basic-switch-5" class="c-toggle-switch__control" role="switch" />
                        <div class="c-toggle-switch__background">
                            <div class="c-toggle-switch__knob">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="c-single-line-list__item">
                <i class="c-single-line-list__item-icon material-icons">favorite</i>
                <label for="basic-switch-6">Single line item</label>
                <div class="c-single-line-list__item-control">
                    <div class="c-toggle-switch">
                        <input type="checkbox" id="basic-switch-6" class="c-toggle-switch__control" role="switch" />
                        <div class="c-toggle-switch__background">
                            <div class="c-toggle-switch__knob">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>