chromium/ash/webui/os_feedback_ui/resources/help_content.html

<style>
  :host-context(body.jelly-enabled) .help-content-label {
    font: var(--cros-headline-1-font);
  }

  :host-context(body.jelly-enabled) .help-item a {
    font: var(--cros-body-1-font);
  }

  :host-context(body.jelly-enabled) paper-tooltip::part(tooltip) {
    font: var(--cros-annotation-2-font);
  }

  [class~='help-item']:last-of-type  {
    padding-bottom: 3px;
  }

  /* Special attribute to hide elements. */
  [hidden] {
    display: none !important;
  }

  .help-content-label {
    color: var(--cros-text-color-secondary);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    margin: 0;
  }

  .help-item {
    display: flex;
    margin:  12px 0 0;
    padding: 0 4px 0 4px;
  }

  .help-item a {
    align-items: center;
    color: var(--cros-text-color-primary);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .help-item a:focus-visible {
    outline: 2px solid var(--cros-focus-ring-color);
  }

  .help-item-icon {
    padding-inline-end: 12px;
  }

  .no-help-content-details {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 16px;
  }

  .no-help-content-text {
    color: var(--cros-text-color-secondary);
    line-height: 18px;
    max-width: 200px;
    text-align: center;
  }

  #helpContentLabelContainer {
    align-items: center;
    display: inline-flex;
  }

  #helpContentIcon {
    --cr-tooltip-icon-fill-color: var(--cros-icon-color-secondary);
    margin-inline-start: 6px;
  }

  #helpContentIcon:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--cros-focus-ring-color);
  }

  #helpContentContainer {
    overflow: visible;
    padding-top: 32px;
  }

  iron-icon {
    --iron-icon-fill-color: var(--cros-text-color-secondary);
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
  }

  paper-tooltip::part(tooltip) {
    border-radius: 2px;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-top: -36px;
    padding: 3px 8px;
  }

  paper-tooltip {
    --paper-tooltip-background: var(--cros-tooltip-background-color);
    --paper-tooltip-delay-in: 100ms;
    --paper-tooltip-text-color: var(--cros-tooltip-label-color);
  }

  svg {
    /* Max height before SVG causes scrolling in page. */
    height: 158px;
  }
</style>
<div id="helpContentContainer">
  <div id="helpContentLabelContainer">
    <h2 class="help-content-label">[[getLabel(searchResult, isOnline)]]</h2>
    <iron-icon icon="os-feedback:info" id="helpContentIcon" tabindex="0"
        hidden$="[[!hasSuggestedHelpContent(searchResult, isOnline)]]"
        aria-labelledby="helpContentLabelTooltip">
    </iron-icon>
    <paper-tooltip for="helpContentIcon" position="right" offset="-20">
      <div id="helpContentLabelTooltip">
        [[i18n('helpContentLabelTooltip')]]
      </div>
    </paper-tooltip>
  </div>
  <template is="dom-if" if="[[!isOnline]]">
    <div class="no-help-content-details">
      <svg id="offlineSvg" preserveAspectRatio="xMidYMid meet" role="img"
          viewBox="0 0 400 168">
        <title>[[i18n('helpContentOfflineAltText')]]</title>
        <use href=
            "//os-feedback/illustrations/illo_network_unavailable.svg#offline">
        </use>
      </svg>
      <div class="no-help-content-text">
        [[i18n('helpContentOfflineMessage')]]
      </div>
    </div>
  </template>
  <template is="dom-if" if="[[isOnline]]">
    <dom-repeat items="[[searchResult.contentList]]">
      <template>
        <div class="help-item">
          <a href="[[getUrl(item)]]" target="_blank"
              on-click="handleHelpContentClicked">
            <iron-icon icon="[[getIcon(item.contentType)]]"
                class="help-item-icon">
            </iron-icon>
            [[getTitle(item)]]
          </a>
        </div>
      </template>
    </dom-repeat>
    <div class="no-help-content-details"
        hidden$="[[!showHelpContentNotAvailableMsg(searchResult)]]">
      <svg id="noContentSvg" preserveAspectRatio="xMidYMid meet" role="img"
          viewBox="0 0 400 168">
        <title>[[i18n('helpContentNotAvailableAltText')]]</title>
        <use href=
            "//os-feedback/illustrations/illo_load_content_error.svg#error">
        </use>
      </svg>
      <div class="no-help-content-text">
        [[i18n('helpContentNotAvailableMessage')]]
      </div>
    </div>
  </template>
</div>