chromium/chrome/browser/resources/settings/get_most_chrome_page/get_most_chrome_page.html

<style include="cr-shared-style settings-shared">
.get-most-chrome {
  padding: 0 var(--cr-section-padding);
}

.centered-picture {
  display: flex;
  justify-content: center;
}

.tip-section {
  display: flex;
  gap: 10px;
  align-items: center;
  --iron-icon-fill-color: var(--google-blue-600);
  background: var(--google-blue-50);
  border-radius: var(--cr-card-border-radius);
  padding-inline-start: var(--cr-section-padding);
  padding-inline-end: var(--cr-section-padding);
  margin-top: var(--cr-section-vertical-padding);
}

@media (prefers-color-scheme: dark) {
  .tip-section {
    --iron-icon-fill-color: black;
    background: var(--google-blue-300);
    color: var(--google-grey-900);
  }

  .tip-section a[href] {
    color: var(--google-grey-900);
  }
}

@media (forced-colors: active) {
  .tip-section {
    --iron-icon-fill-color: ButtonText;
  }
}

h3 {
  margin: 0;
  padding-block-start: var(--cr-section-vertical-padding);
  font-size: 100%;
  font-weight: 500;
}

em {
  font-style: normal;
  font-weight: 500;
}

ul {
  margin-block-end: 0;
}
</style>
<cr-expand-button class="cr-row first" id="first" expanded="{{expandedFirst_}}">
  <div>$i18n{getTheMostOutOfChromeBetterForYou}</div>
</cr-expand-button>
<cr-collapse opened="[[expandedFirst_]]">
  <div class="get-most-chrome">
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBetterWebMakingTheWeb}
    </div>
    <h3>
      $i18nRaw{getTheMostOutOfChromeBetterWebSubTitleChromeGivesYouChoice}
    </h3>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBetterWebYouCanCustomize}
    </div>
    <h3>
      $i18nRaw{getTheMostOutOfChromeBetterWebSubTitleChromeSupportsFreeWeb}
    </h3>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBetterWebAdsCritical}
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBetterWebAdsAlsoSupport}
    </div>
  </div>
</cr-collapse>
<cr-expand-button class="cr-row hr" id="second" expanded="{{expandedSecond_}}">
  <div>$i18n{getTheMostOutOfChromeYourDataInChrome}</div>
</cr-expand-button>
<cr-collapse opened="[[expandedSecond_]]">
  <div class="get-most-chrome">
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeYourDataWhenYouBrowse}
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeYourDataThisInformationUseful}
    </div>
    <h3>
      $i18nRaw{getTheMostOutOfChromeYourDataSubTitleWhatsDifferenceBrowsingSearchHistory}
    </h3>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeYourDataBrowsingHistory}
    </div>
    <div class="centered-picture">
      <picture>
        <source
            srcset="./images/gtmooc_diagram_history_dark.svg"
            media="(prefers-color-scheme: dark)">
        <img id="banner" alt=""
            src="./images/gtmooc_diagram_history.svg">
      </picture>
    </div>
    <div class="cr-padded-text tip-section">
      <iron-icon icon="settings20:lightbulb"></iron-icon>
      <div>
        $i18nRaw{getTheMostOutOfChromeYourDataVisitChromeHistory}
      </div>
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeYourDataWhenYouSearch}
    </div>
    <div class="centered-picture">
      <picture>
        <source
            srcset="./images/gtmooc_diagram_search_dark.svg"
            media="(prefers-color-scheme: dark)">
        <img id="banner" alt=""
            src="./images/gtmooc_diagram_search.svg">
      </picture>
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeYourDataVisitSearchHistory}
    </div>
  </div>
</cr-collapse>
<cr-expand-button class="cr-row hr" id="third" expanded="{{expandedThird_}}">
  <div>$i18n{getTheMostOutOfChromeBeyondCookies}</div>
</cr-expand-button>
<cr-collapse opened="[[expandedThird_]]">
  <div class="get-most-chrome">
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesOnceYouFindASite}
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesDependingOnSitePermissions}
    </div>
    <div class="cr-padded-text tip-section">
      <iron-icon icon="settings20:lightbulb"></iron-icon>
      <div>
        $i18nRaw{getTheMostOutOfChromeBeyondCookiesReviewPermissions}
      </div>
    </div>
    <h3>
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesCookiesCanEnrich}
    </h3>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesImagineYouHaveFavoriteCafe}
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesCookiesAllowSameLevelCustomization}
    </div>
    <div class="centered-picture">
      <picture>
        <source
            srcset="./images/gtmooc_diagram_cookie_dark.svg"
            media="(prefers-color-scheme: dark)">
        <img id="banner" alt=""
            src="./images/gtmooc_diagram_cookie.svg">
      </picture>
    </div>
    <h3>
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesSomesSitesMisuseCookies}
    </h3>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesPlanningToPhaseOut}
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesWhatAreThirdPartyCookies}
    </div>
    <div class="cr-padded-text">
      $i18nRaw{getTheMostOutOfChromeBeyondCookiesChromePartOfEffort}
    </div>
  </div>
</cr-collapse>