chromium/chrome/browser/resources/settings/settings_page/settings_section.html

    <style>
      :host {
        display: flex;
        flex-direction: column;
        outline: none;
        position: relative;
      }

      #header {
        display: flex;
        justify-content: space-between;
        padding-inline-end: var(--cr-section-padding);
      }

      #header .title {
        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;
      }

      #feedback {
        margin-top: var(--cr-section-vertical-margin);
      }

      :host(:not(.expanded)) #card {
        background-color: var(--cr-card-background-color);
        border-radius: var(--cr-card-border-radius);
        box-shadow: var(--cr-card-shadow);
        flex: 1;
        overflow: hidden;
      }

      @media (forced-colors: active) {
        /* Use border instead of box-shadow (which does not work) in Windows
           HCM. */
        :host(:not(.expanded)) #card {
          border: var(--cr-border-hcm);
        }
      }

      :host(.expanded) #header,
      :host([hidden-by-search]) {
        display: none;
      }
    </style>
    <div id="header">
      <h2 id="title" class="title" tabindex="-1"
          aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2>
      <template is="dom-if" if="[[showSendFeedbackButton]]">
        <cr-icon-button id="feedback" iron-icon="settings:feedback"
            aria-labelledby="title" suppress-rtl-flip
            aria-roledescription="$i18n{sendFeedbackButton}"
            on-click="onSendFeedbackClick_">
        </cr-icon-button>
      </template>
    </div>
    <div id="card">
      <slot></slot>
    </div>