chrome/browser/resources/chromeos/cloud_upload/base_setup_page.html

<style>
  :host {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 552px;
    padding: 32px;
    width: 512px;
  }

  #content {
    flex-grow: 1;
    margin-block: 32px;
    max-height: 192px;
    overflow: scroll;
  }

  #content.fade-top::before {
    background: linear-gradient(var(--cros-bg-color) 0,
                                transparent 100%);
    bottom: 268px;  /* margin + buttons + content margin and height - height */
    content: '';
    height: 20px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    #content.fade-top::before {
      background: linear-gradient(var(--cros-bg-color-elevation-3) 0,
                                  transparent 100%);
    }
  }

  #content.fade-bottom::after {
    background: linear-gradient(transparent 0,
                                var(--cros-bg-color) 100%);
    bottom: 96px;  /* margin + buttons + content margin */
    content: '';
    height: 20px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    #content.fade-bottom::after {
      background: linear-gradient(transparent 0,
                                  var(--cros-bg-color-elevation-3) 100%);
    }
  }

  #header-image {
    background-color: var(--cros-highlight-color);
    border-radius: 12px;
    height: 200px;
    width: 448px;
  }

  ::slotted([slot=header-image]) {
    /* As this surface is a dialog, replace the color palette with its elevated
     * variant. */
    --cros-illustration-color-1-shade-1: var(
      --cros-illustration-elevation-color-1-shade-1);
    --cros-illustration-color-1-shade-2: var(
      --cros-illustration-elevation-color-1-shade-2);
    --cros-illustration-base-color: var(
      --cros-illustration-elevation-base-color);
    --cros-illustration-secondary-color: var(
      --cros-illustration-elevation-secondary-color);

    height: 100%;
    width: 100%;
  }

  ::slotted([slot=title]) {
    color: var(--cros-text-color-primary);
    font: var(--cros-display-6-font);
  }

  ::slotted([slot=body]) {
    color: var(--cros-text-color-secondary);
    font: var(--cros-body-2-font);
    margin-block-start: 16px;
  }

  div#footer {
    display: flex;
  }

  div#dots {
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: 12px;
    /* TODO(petermarshall): Remove dots or make visible again. */
    visibility: hidden;
  }

  div#dots > div {
    background-color: var(--cros-button-stroke-color-secondary);
    border-radius: 50%;
    height: 8px;
    width: 8px;
  }

  div#dots > div.active {
    background-color: var(--cros-icon-color-prominent);
  }
</style>

<div id="header-image">
  <slot name="header-image"></slot>
</div>
<div id="content">
  <slot name="title"></slot>
  <slot name="body"></slot>
</div>
<div id="footer">
  <div id="dots"></div>
  <slot name="button-container"></slot>
</div>