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

<style>
  :host {
    --settings-card-bg-color: var(--cros-sys-app_base);
    --settings-card-border-radius: var(--cr-card-border-radius);

    display: flex;
    flex-direction: column;
    outline: none;
    position: relative;
  }

  :host-context(body.revamp-wayfinding-enabled):host {
    --settings-card-border-radius: 16px;

    margin-bottom: 16px;
  }

  @media (prefers-color-scheme: dark) {
    :host-context(body.revamp-wayfinding-enabled):host {
      --settings-card-bg-color: var(--cros-sys-surface1);
    }
  }

  :host-context(body.revamp-wayfinding-enabled) #header {
    margin: 0;
    padding: 8px;
  }

  :host-context(body:not(.revamp-wayfinding-enabled)) #headerText {
    color: var(--cr-primary-text-color);
    font-size: 108%;
    font-weight: 400;
    letter-spacing: .25px;
    margin-bottom: 12px;
    margin-top: var(--cr-section-vertical-margin);
    outline: none;
    padding-bottom: 4px;
    padding-top: 8px;
  }

  :host-context(body.revamp-wayfinding-enabled) #headerText {
    color: var(--cros-sys-primary);
    font: var(--cros-button-2-font);
    margin: 0;
    outline: none;
    padding: 0;
  }

  #card {
    background-color: var(--settings-card-bg-color);
    border-radius: var(--settings-card-border-radius);
    flex: 1;
    overflow: hidden;
  }

  :host-context(body:not(.revamp-wayfinding-enabled)) #card {
    box-shadow: var(--cr-card-shadow);
  }
</style>
<template is="dom-if" if="[[headerText]]" restamp>
  <div id="header">
    <h2 id="headerText" tabindex="-1">
      [[headerText]]
    </h2>
  </div>
</template>
<div id="card">
  <slot></slot>
</div>