chromium/chrome/browser/resources/ash/settings/nearby_share_page/nearby_share_high_visibility_page.html

<style>
  #content {
    background: linear-gradient(to top,
        var(--nearby-page-linear-gradient-color-start) 5%, transparent 50%);
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    position: relative;
    width: 100%;
  }

  #help {
    align-items: flex-start;
    color: var(--cros-sys-secondary);
    display: flex;
    flex-direction: row;
    font: var(--cros-annotation-2-font);
    margin-inline-end: 24px;
    margin-inline-start: 24px;
    padding: 8px;
  }

  #helpText {
    margin: auto 0;
  }

  #infoIcon {
    flex-shrink: 0;
    height: 16px;
    margin-inline-end: 8px;
    width: 16px;
  }

  .icon-help-state {
    fill: var(--cros-sys-secondary);
  }

  .icon-error-state {
    fill: var(--cros-sys-error);
  }

  #error {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  #errorTitle {
    color: var(--cros-sys-error);
    font: var(--cros-button-2-font);
    margin-bottom: 3px;
  }

  #errorDescription {
    color: var(--cros-sys-secondary);
    font: var(--cros-annotation-2-font);
  }

  #animation {
    bottom: 0;
    height: 100px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
  }
</style>
<nearby-page-template title="$i18n{nearbyShareFeatureName}"
    sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]"
    a11y-announced-sub-title="[[getA11yAnnouncedSubTitle_(deviceName,
                              remainingTimeInSeconds_)]]"
    cancel-button-label="$i18n{cancel}"
    close-only="[[getErrorTitle_(errorState_)]]">
  <div id="content" slot="content">
      <cros-lottie-renderer id="animation" asset-url="[[getAnimationUrl_()]]"
          autoplay dynamic aria-hidden>
      </cros-lottie-renderer>
    <div id="help">
      <template is="dom-if" if="[[!getErrorTitle_(errorState_)]]" restamp>
        <iron-icon id="infoIcon" icon="nearby20:info"
            class="icon-help-state">
        </iron-icon>
        <div id="helpText">
          <localized-link
              localized-string="$i18n{nearbyShareHighVisibilityHelpText}"
              link-url="$i18n{nearbyShareLearnMoreLink}">
          </localized-link>
        </div>
      </template>
      <template is="dom-if" if="[[getErrorTitle_(errorState_)]]">
        <iron-icon id="infoIcon" icon="nearby20:info"
            class="icon-error-state">
        </iron-icon>
        <div id="error" role="alert" aria-labelledby="errorTitle"
            aria-describedby="errorDescription">
          <div id="errorTitle" aria-hidden="true">
            [[getErrorTitle_(errorState_)]]
          </div>
          <div id="errorDescription" aria-hidden="true">
            <localized-link
                localized-string="[[getErrorDescription_(errorState_)]]"
                link-url="$i18n{nearbyShareLearnMoreLink}">
            </localized-link>
          </div>
        </div>
      </template>
    </div>
  </div>
</nearby-page-template>