chrome/browser/resources/new_tab_page/modules/module_header.html

<style include="cr-icons">
  :host {
    display: flex;
    flex-direction: column;
    margin: 16px;
  }

  #titleContainer {
    align-items: center;
    display: flex;
    height: 22px;
  }

  .icon-background {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 18px;
    justify-content: center;
    margin-inline-end: 8px;
    width: 18px;
  }

  .module-icon {
    -webkit-mask-size: 20px 20px;
    background-color: var(--color-new-tab-page-primary-foreground);
    height: var(--cr-icon-size);
    width: var(--cr-icon-size);
  }

  #title {
    color: var(--color-new-tab-page-primary-foreground);
    font-size: 15px;
    font-weight: normal;
  }

  #chip {
    background-color: var(--color-new-tab-page-chip-background);
    border-radius: 4px;
    color: var(--color-new-tab-page-chip-foreground);
    font-size: 10px;
    height: 12px;
    margin-inline-start: 10px;
    padding: 2px 6px;
  }

  #headerSpacer {
    flex-grow: 1;
  }

  cr-action-menu {
    --cr-menu-shadow: var(--ntp-menu-shadow);
  }

  cr-icon-button {
    --cr-icon-button-icon-size: 16px;
    --cr-icon-button-fill-color: var(--color-new-tab-page-primary-foreground);
    --cr-icon-button-hover-background-color:
        var(--color-new-tab-page-control-background-hovered);
    margin-inline-end: -4px;
    margin-inline-start: 0;
  }

  #infoButton {
    --cr-icon-image: url(./icons/info.svg);
  }

  #menuButton {
    margin-inline-end: -10px;
  }

  :host([modules-redesigned-enabled_]) #menuButton {
    background-color: var(--color-new-tab-page-module-scroll-button);
    height: 18px;
    margin: 0;
    width: 18px;
  }

  :host([modules-redesigned-enabled_]) #menuButton:hover {
    background-color: var(--color-new-tab-page-module-scroll-button-hover);
  }

  #description {
    color: var(--color-new-tab-page-secondary-foreground);
    font-size: 12px;
    height: 12px;
    margin-top: 3px;
  }
</style>
<div id="titleContainer">
  <template is="dom-if" if="[[showIcon_]]">
    <div class="icon-background">
      <div class="module-icon" style$="[[iconStyle_]]">
      </div>
    </div>
  </template>
  <h2 id="title"><slot></slot></h2>
  <template is="dom-if" if="[[chipText]]">
    <div id="chip">[[chipText]]</div>
  </template>
  <div id="headerSpacer"></div>
  <slot name="title-actions"></slot>
  <template is="dom-if" if="[[showInfoButton]]">
    <cr-icon-button id="infoButton" title="$i18n{moduleInfoButtonTitle}"
        on-click="onInfoButtonClick_">
    </cr-icon-button>
  </template>
  <template is="dom-if" if="[[!hideMenuButton]]" restamp>
    <cr-icon-button id="menuButton" title="[[moreActionsText]]"
        class="icon-more-vert" on-click="onMenuButtonClick_">
    </cr-icon-button>
  </template>
</div>
<template is="dom-if" if="[[descriptionText]]">
  <span id="description">[[descriptionText]]</span>
</template>
<cr-action-menu id="actionMenu">
  <slot name="action-menu-items"></slot>
  <template is="dom-if" if="[[showDismissButton]]">
    <button id="dismissButton" class="dropdown-item"
        on-click="onDismissButtonClick_">
      [[dismissText]]
    </button>
  </template>
  <button id="disableButton" class="dropdown-item"
      on-click="onDisableButtonClick_">
    [[disableText]]
  </button>
  <button id="customizeButton" class="dropdown-item"
      on-click="onCustomizeButtonClick_">
    $i18n{modulesCustomizeButtonText}
  </button>
  <template is="dom-if" if="[[showInfoButtonDropdown]]">
    <button id="infoButton" class="dropdown-item"
        on-click="onInfoButtonClick_">
      $i18n{moduleInfoButtonTitle}
    </button>
  </template>
</cr-action-menu>