chromium/chrome/browser/resources/ash/settings/os_bluetooth_page/os_bluetooth_true_wireless_images.html

<style include="settings-shared">
  #container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 100px;
    justify-content: center;
    margin: 40px 0;
  }

  .image-wrapper {
    height: 60px;
    margin-bottom: 16px;
    width: 60px;
  }

  .image-wrapper img {
    border: 1px solid var(--cros-color-primary-dark);
    border-radius: 50%;
    height: 100%;
    width: 100%;
  }

  .battery-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 124px;
    justify-content: center;
  }

  bluetooth-battery-icon-percentage {
    margin-bottom: 8px;
  }

  #notConnectedLabel {
    color: gray;
  }
</style>
<div id="container">
  <template is="dom-if" restamp
      if="[[shouldShowBatteryTypeInfo_(device, BatteryType.LEFT_BUD)]]">
    <div id="leftBudContainer" class="battery-container">
      <div class="image-wrapper">
        <img src="[[getImageSrc_(device, BatteryType.LEFT_BUD)]]"
            alt="Left bud device image">
      </div>
      <span id="leftBudLabel">
        [[getBatteryTypeString_(device, BatteryType.LEFT_BUD)]]
      </span>
      <bluetooth-battery-icon-percentage
        device="[[device]]"
        battery-type="[[BatteryType.LEFT_BUD]]">
      </bluetooth-battery-icon-percentage>
    </div>
  </template>
  <template is="dom-if" restamp
      if="[[shouldShowBatteryTypeInfo_(device, BatteryType.CASE)]]">
    <div id="caseContainer" class="battery-container">
      <div class="image-wrapper">
        <img src="[[getImageSrc_(device, BatteryType.CASE)]]"
            alt="Case device image">
      </div>
      <span id="caseLabel">
        [[getBatteryTypeString_(device, BatteryType.CASE)]]
      </span>
      <bluetooth-battery-icon-percentage
        device="[[device]]"
        battery-type="[[BatteryType.CASE]]">
      </bluetooth-battery-icon-percentage>
    </div>
  </template>
  <template is="dom-if" restamp
      if="[[shouldShowBatteryTypeInfo_(device, BatteryType.RIGHT_BUD)]]">
    <div id="rightBudContainer" class="battery-container">
      <div class="image-wrapper">
        <img src="[[getImageSrc_(device, BatteryType.RIGHT_BUD)]]"
            alt="Right bud device image">
      </div>
      <span id="rightBudLabel">
        [[getBatteryTypeString_(device, BatteryType.RIGHT_BUD)]]
      </span>
      <bluetooth-battery-icon-percentage
        device="[[device]]"
        battery-type="[[BatteryType.RIGHT_BUD]]">
      </bluetooth-battery-icon-percentage>
    </div>
  </template>
  <template is="dom-if" restamp
      if="[[shouldShowDefaultInfo_(device)]]">
    <div id="defaultContainer" class="battery-container">
      <div class="image-wrapper">
        <img src="[[getImageSrc_(device, BatteryType.DEFAULT)]]"
            alt="Default device image">
      </div>
      <template is="dom-if" restamp
        if="[[isDeviceNotConnected_(device)]]">
        <span id="notConnectedLabel">
          $i18n{bluetoothDeviceDetailDisconnected}
        </span>
      </template>
      <template is="dom-if" restamp
        if="[[!isDeviceNotConnected_(device)]]">
        <bluetooth-battery-icon-percentage
          device="[[device]]"
          battery-type="[[BatteryType.DEFAULT]]">
        </bluetooth-battery-icon-percentage>
      </template>
    </div>
  </template>
</div>