[MD settings] using h2 for sub-headers consistently.

chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_shared_menu/cr_shared_menu.html">
 <link rel="import" href="/passwords_and_forms_page/password_edit_dialog.html">
 <link rel="import" href="/passwords_and_forms_page/passwords_shared_css.html">
 <link rel="import" href="/prefs/prefs.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="passwords-section">
   <!-- action_link.css is needed for the |managePasswordsLabel| link -->
   <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <template>
     <style include="settings-shared passwords-shared">
-      #manageLink {
-        margin-bottom: 24px;
-      }
-
       #password {
         background-color: transparent;
         border: none;
         flex: 1;
         height: 20px;
         width: 0;
       }
 
-      #autosigninCheckbox {
-        margin-bottom: 24px;
-      }
-
       .website-column {
         flex: 3;
       }
 
       .username-column {
         -webkit-margin-end: 16px;
         -webkit-margin-start: 16px;
         flex: 2;
       }
 
       .password-column {
         align-items: center;
         display: flex;
         flex: 2;
       }
 
       .selectable {
         -webkit-user-select: text;
       }
 
       .menu-item {
         @apply(--settings-actionable);
       }
     </style>
-    <settings-checkbox id="autosigninCheckbox"
-        pref="{{prefs.credentials_enable_autosignin}}"
-        label="$i18n{passwordsAutosigninLabel}"
-        sub-label="$i18n{passwordsAutosigninDescription}">
-    </settings-checkbox>
-    <div id="manageLink">$i18nRaw{managePasswordsLabel}</div>
-    <div class="heading">$i18n{savedPasswordsHeading}</div>
-    <div class="item-list" scrollable>
+    <div class="settings-box first two-line">

[Dan Beam, 2017/01/10 22:28:01]

why is this two-line?

[dschuyler, 2017/01/10 22:54:40]

Likely for the sub-label="". It may be nicer if this were better connected to
the contents. And/or it may be nice to have two-line as an attribute for
two-line$="[[hasSubLabel]]" or similar.

[Dan Beam, 2017/01/10 22:58:55]

connected to the contents like this?
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/contro...

[dschuyler, 2017/01/10 23:05:19]

Like that, yes.

+      <settings-checkbox id="autosigninCheckbox"
+          pref="{{prefs.credentials_enable_autosignin}}"
+          label="$i18n{passwordsAutosigninLabel}"
+          sub-label="$i18n{passwordsAutosigninDescription}">
+      </settings-checkbox>
+    </div>
+    <div id="manageLink" class="settings-box first">
+      <!-- This span lays out the url correctly, relative to the label. -->
+      <span>$i18nRaw{managePasswordsLabel}</span>
+    </div>
+    <div class="settings-box first">
+      <h2>$i18n{savedPasswordsHeading}</h2>
+    </div>
+    <div class="list-frame" scrollable>
       <div class="list-item column-header">
         <div class="website-column">$i18n{editPasswordWebsiteLabel}</div>
         <div class="username-column">
           $i18n{editPasswordUsernameLabel}
         </div>
         <div class="password-column">
           $i18n{editPasswordPasswordLabel}
         </div>
       </div>
       <iron-list id="passwordList"
           items="[[getFilteredPasswords_(savedPasswords, filter)]]"
-          class="vertical-list list-section list-with-header">
+          class="vertical-list list-with-header">
         <template>
           <div class="list-item">
             <div class="website-column">
               <a id="originUrl" target="_blank" class="selectable"
                   href="[[item.linkUrl]]">[[item.loginPair.originUrl]]</a>
             </div>
             <div class="username-column selectable"
                 id="username">[[item.loginPair.username]]</div>
             <div class="password-column">
               <!-- Password type and disabled in order to match mock. -->
@@ skipping 14 matching lines @@
           on-tap="onMenuEditPasswordTap_"
           hidden="[[!showPasswords]]">$i18n{passwordViewDetails}</button>
       <button id="menuRemovePassword" class="list-item menu-item"
           on-tap="onMenuRemovePasswordTap_">$i18n{removePassword}</button>
     </cr-shared-menu>
     <template is="dom-if" if="[[activePassword]]" restamp>
       <password-edit-dialog on-close="unstampPasswordEditDialog_"
           item="[[activePassword]]">
       </password-edit-dialog>
     </template>
-    <div class="heading">$i18n{passwordExceptionsHeading}</div>
-    <div id="passwordExceptionsList"
-        class="vertical-list list-section item-list">
+    <div class="settings-box block first">
+      <h2>$i18n{passwordExceptionsHeading}</h2>
+    </div>
+    <div id="passwordExceptionsList" class="list-frame vertical-list">
       <template is="dom-repeat" items="[[passwordExceptions]]"
           filter="[[passwordExceptionFilter_(filter)]]">
         <div class="list-item two-line">
           <div class="start">
             <a id="exception" href="[[item.linkUrl]]" target="_blank"
                 class="selectable">[[item.exceptionUrl]]</a>
           </div>
           <paper-icon-button id="removeExceptionButton"
               icon="cr:close" on-tap="onRemoveExceptionButtonTap_"
               tabindex$="[[tabIndex]]"
               alt="$i18n{deletePasswordException}">
           </paper-icon-button>
         </div>
       </template>
     </div>
   </template>
   <script src="/passwords_and_forms_page/passwords_section.js"></script>
 </dom-module>