chromium/chrome/browser/resources/ash/settings/os_settings_page/os_settings_subpage.html

<style include="cr-shared-style settings-shared">
  :host {
    box-sizing: border-box;
    display: block;
  }

  :host-context(body:not(.revamp-wayfinding-enabled)):host {
    background-color: var(--cros-sys-app_base);
    box-shadow: var(--cr-card-shadow);
    min-height: calc(100vh - var(--settings-toolbar-height));
    padding-bottom: 60px;
  }

  #subpageHeader {
    min-height: 40px;
    padding-bottom: 24px;
    padding-top: 8px;
  }

  :host-context(body.revamp-wayfinding-enabled) #subpageHeader {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #subpageTitle {
    flex: 1;  /* Push other items to the end. */
    font: var(--cros-button-1-font);
  }

  :host-context(body.revamp-wayfinding-enabled) #subpageTitle {
    color: var(--cros-sys-primary);
  }

  #titleIcon {
    height: 36px;
    margin-inline-end: 12px;
    margin-inline-start: 2px;
    width: 36px;
  }

  #backButton {
    /* Centers the ripple on the icon with appropriate margin on right. */
    margin-inline-end: 10px;
    margin-inline-start: -10px;
  }

  :host-context(body.revamp-wayfinding-enabled) #backButton {
    --cr-icon-button-fill-color: var(--cros-sys-primary);
  }

  #cardBody {
    margin-bottom: 0;
  }

  paper-spinner-lite {
    height: var(--cr-icon-size);
    width: var(--cr-icon-size);
  }

  cr-search-field {
    --cr-search-field-input-width: 200px;
    /* Keep normal icon spacing from subpage-title-extra controls. */
    margin-inline-start: 16px;
  }

  /* Use ID to increase specificity over cros-color-overrides. */
  :host-context(body.revamp-wayfinding-enabled)
      #searchField::part(searchInput) {
    /* Add contrast between the search input and the subpage backdrop. */
    --cr-input-background-color: var(--cros-sys-input_field_on_shaded);
  }
</style>
<div id="subpageHeader" class="cr-row first">
  <cr-icon-button id="backButton" class="icon-arrow-back"
      hidden="[[hideBackButton]]" on-click="onBackClick_"
      aria-label$="[[getBackButtonAriaLabel_(pageTitle)]]"
      aria-roledescription$=
          "[[getBackButtonAriaRoleDescription_(pageTitle)]]">
  </cr-icon-button>
  <template is="dom-if" if="[[titleIcon]]">
    <img id="titleIcon" src="[[titleIcon]]" aria-hidden="true">
  </template>
  <h1 id="subpageTitle">[[pageTitle]]</h1>
  <template is="dom-if" if="[[learnMoreUrl]]">
    <cr-icon-button iron-icon="cr:help-outline" dir="ltr"
        aria-label="[[getLearnMoreAriaLabel_(pageTitle)]]" on-click="onHelpClick_">
    </cr-icon-button>
  </template>
  <template is="dom-if" if="[[searchLabel]]">
    <cr-search-field id="searchField"
        label="[[searchLabel]]"
        on-search-changed="onSearchChanged_"
        clear-label="$i18n{clearSearch}">
    </cr-search-field>
  </template>
  <template is="dom-if" if="[[showSpinner]]">
    <paper-spinner-lite active title$="[[spinnerTitle]]">
    </paper-spinner-lite>
  </template>
  <slot name="subpage-title-extra"></slot>
</div>

<template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
  <settings-card id="cardBody">
    <slot></slot>
  </settings-card>
</template>
<template is="dom-if" if="[[!isRevampWayfindingEnabled_]]">
  <slot></slot>
</template>