A CCD (Common Charger Directive) is a pictogram to display if a charger is included with a product or not. It also displays the Wattage of the charger in an easy way to allow users to know if this charger is compatible with their plugs.

CCD consists of two icons. The first represents if the charger is included or not. The second is the label that details the actual rating and fast charging specifications

In the rating, the range is always shown as Watts (W).

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>