Ccd Component

Charger included with USB PD

When charger is included, use the ccd-charger-included icon.

<div
  class="ccd"
  role="figure"
  aria-label="Charger included. 1001 - 2000 watts. USB PD"
>
  <svg class="icon ccd__charger-icon">
    <use href="#ccd-charger-included" />
  </svg>
  <div class="ccd__description-figure">
    <svg class="icon ccd__top-icon" aria-hidden="true">
      <use href="#ccd-top" />
    </svg>
    <div class="ccd__body">
      <div>1001 - 2000</div>
      <div>W</div>
      <div>USB PD</div>
    </div>
  </div>
</div>

Charger not included

When charger is not included, use the ccd-charger-not-included icon.

<div
  class="ccd"
  role="figure"
  aria-label="Charger not included. 1001 - 2000 watts. USB PD"
>
  <svg class="icon ccd__charger-icon">
    <use href="#ccd-charger-included" />
  </svg>
  <div class="ccd__description-figure">
    <svg class="icon ccd__top-icon" aria-hidden="true">
      <use href="#ccd-top" />
    </svg>
    <div class="ccd__body">
      <div>1001 - 2000</div>
      <div>W</div>
      <div>USB PD</div>
    </div>
  </div>
</div>

Charger included without USB PD

The USB PD text is shown if the charger has USB PD. If the charger does not have USB PD, the text should not be shown.

<div class="ccd" role="figure" aria-label="Energy Rating">
  <svg class="icon ccd__charger-icon">
    <use href="#ccd-charger-included" />
  </svg>
  <div class="ccd__description-figure">
    <svg class="icon ccd__top-icon" aria-hidden="true">
      <use href="#ccd-top" />
    </svg>
    <div class="ccd__body">
      <div>1001 - 2000</div>
      <div>W</div>
    </div>
  </div>
</div>