goodybag meters

This handsome little devil is how we let members know what's left in their goodybag

How we design it

  • The green indicator bars are decorative and do not need to meet the AA contrast ratio
  • The indicator bars fill the horizontal space of the container they are placed in until they reach their max size of 192px
  • The width of the indicator bars is set as a percentage via inline CSS on the gg-c-goodybag-meter__indicator-bar
  • The aria-label on the gg-c-goodybag-meter__indicator must be set to the same percentage as the indicator bar

How it looks

View demo Open in new window
Open in new window
320 x 568
View code 
    <div class="gg-c-goodybag-meter">
  <img class="gg-u-icon gg-u-icon--gargantuan" src="https://static.giffgaff.com/design-system/brand/latest/goodybags/20-pound-goodybag.svg" alt="£20 goodybag">
  <dl class="gg-c-goodybag-meter__info">
      <dt>
        <img src="https://www.giffgaff.design/iconography/icons/library/data-world-map.svg" class="gg-u-icon gg-u-icon--inline gg-u-icon--medium">
        Data:
      </dt>
      <dd class="gg-c-goodybag-meter__value">3 GB</dd>
      <dd class="gg-c-goodybag-meter__level">
        <div class="gg-c-goodybag-meter__indicator" aria-label="33%"><div class="gg-c-goodybag-meter__indicator-bar" style="width:33%"></div></div>
      </dd>
      <dt>
        <img src="https://www.giffgaff.design/iconography/icons/library/phone-call.svg" class="gg-u-icon gg-u-icon--inline gg-u-icon--medium">
        Mins:
      </dt>
      <dd class="gg-c-goodybag-meter__value">1000</dd>
      <dd class="gg-c-goodybag-meter__level">
        <div class="gg-c-goodybag-meter__indicator" aria-label="50%"><div class="gg-c-goodybag-meter__indicator-bar" style="width:50%"></div></div>
      </dd>
      <dt>
        <img src="https://www.giffgaff.design/iconography/icons/library/speech-bubble-text.svg" class="gg-u-icon gg-u-icon--inline gg-u-icon--medium">
        Texts:
      </dt>
      <dd class="gg-c-goodybag-meter__value">Unlimited</dd>
      <dd class="gg-c-goodybag-meter__level">
        <div class="gg-c-goodybag-meter__indicator" aria-label="100%"><div class="gg-c-goodybag-meter__indicator-bar" style="width:100%"></div></div>
      </dd>
  </dl>
</div>