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
320 x 568
View code
<div class="gg-c-goodybag-meter">
  <div class="gg-o-media gg-o-media--small-gutter">
    <div class="gg-o-media__img">
      <svg xmlns="http://www.w3.org/2000/svg" class="gg-u-icon gg-u-icon--gargantuan" viewBox="1.3 6.2 147.4 137.4" role="img" aria-labelledby="20-goodybag-title">
       <title id="20-goodybag-title">£20 goodybag</title>
        <style>
          .st1{fill:#373438}.st2{fill:#fff}
        </style>
        <path fill="#616261" d="M74.6 49.9h.8v14.4h-.8zm0-12.2h.8v5h-.8zm4 17.7l-.8-.1-.8 4.8.8.2zm-4-39.3h.8v14.4h-.8zm0-9.9h.8v2.7h-.8zM73 60.1l-.8-4.8-.8.1.8 4.9zm-20.9 43.6l3.2-4.1-.6-.4-3.2 4zm2.7-11.6L44 102l.6.6 10.8-9.9zm27.5-30.4l2.4-4.3-.7-.4-2.5 4.4zm-.1-27l-.8-.2L79 48.4l.8.1zm5.4 4.9l-.8-.2-1.7 4.8.8.2zm-.2 11.2l.8.3 6.9-12.5-.8-.3zM98.2 9.7l-.8-.3-.9 2.6.8.2zm-3.4 9.4l-.7-.3-4.9 13.7.8.3zm-10.9 6l-.9-.2-.4 2.7.8.1zM44 46.1L54.8 56l.6-.6-10.8-9.9zM82.7 51l-4.8 13.7.8.2 4.8-13.7zM64.8 76.7L50 81.1l.2.8 14.9-4.5zm-32.7-8.5l15 2.2.1-.8-15-2.2zm.1 12.5l15-2.2-.1-.8-15 2.2zm3.3-7H41v.8h-5.5zm16.6-29.3l-.6.5 3.2 4 .6-.4zM37.6 85.6l5.2-1.5-.3-.7-5.2 1.5zm10.1 7.2l-.5-.7-4.4 3 .5.6zM36.1 56.3l13.6 6.3.4-.7-13.6-6.3zm14 29.9l-.4-.7-13.6 6.3.4.7zm-7.6-21.5l.3-.7-5.2-1.5-.3.7zm14.4.4l-.4.7 4.7 2.2.4-.7zm41.6-32.7l1.4-2.4-.8-.4-1.3 2.4zM50 67l14.8 4.4.3-.7-14.9-4.5zm6.9 16l4.7-2.2-.4-.7-4.7 2.2zm9.3-3.6l-12.6 8.5.5.6 12.6-8.4zM42.8 53l4.4 3 .5-.7-4.4-2.9zm12 17.7l-.2.8 5.3.7.1-.7zm-6 3h15.6v.8H48.8zm6 3.7l5.2-.8-.1-.7-5.3.7zm58.7-21.8l-13.6 6.3.4.7 13.6-6.3zm-18.3.4l10.8-9.9-.6-.6-10.8 9.9zm-10 15.4L100 67l-.2-.8-14.9 4.5zm11.2 16.5l-12.6-8.5-.5.7 12.6 8.4zM93.1 83l.4-.7-4.7-2.2-.4.7zm14.4-18.3l5.2-1.5-.3-.7-5.2 1.5zm-21.4 19l-.6.5 3.7 3.5.6-.5zm13.9-2.6l-14.8-4.4-.3.7 14.9 4.5zm-2.1-36.7l-3.2 4.1.6.4 3.2-4zm25 6.8l-2.6 1.2.3.7 2.7-1.2zm2.6 15.9l2.8-.4-.1-.8-2.9.4zm-13.2-39.7l-.6-.4-9.2 11.6.6.4zm22.4 28.4l-14.8 4.4.2.8 14.9-4.5zM80.9 82.1l9.2 11.7.6-.5-9.2-11.6zm17 21.6l.6-.5-3.2-4-.6.4zm15.6-54.9l12.7-8.5-.5-.6-12.7 8.4zM106 102l-10.8-9.9-.6.6 10.8 9.9zm28.9-67.5l-.5-.6-2.4 1.6.5.6zm-17 45.4l-15-2.2-.1.8 15 2.2zm-8.9-6.2h5.5v.8H109zm-1.5 9.7l-.3.7 5.2 1.5.3-.7zM93.1 65.1l-4.7 2.2.4.7 4.7-2.2zm18.3-24l2-1.9-.6-.5-2 1.9zm6.4 26.3l-15 2.2.1.8 15-2.2zm-10.6 27.7l-4.4-3-.5.7 4.4 2.9zm11.5-75.7l-.7-.4-1.7 2.1.6.5zm-4.8 72.4l-13.6-6.3-.4.7 13.6 6.3zM90.1 75.9l-.1.7 5.2.8.2-.8zm-4.5-2.2h15.6v.8H85.6zM80.9 66l.6.4 9.2-11.6-.6-.5zm9.2 6.2l5.3-.7-.2-.8-5.2.8zm-.9-11.8l-3.7 3.5.6.5 3.7-3.5zm-5.4 8.2l12.6-8.4-.5-.6L83.3 68zm18.5-13.3l.5.7 4.4-3-.5-.6zM77 88l.8 4.8.8-.1-.8-4.9zm4.5-1.3l2.5 4.4.7-.4-2.4-4.3zm-6.9 18.7h.8v5h-.8zm0-21.6h.8v14.4h-.8zm0 33.8h.8V132h-.8zm8 2.9l.4 2.6.9-.1-.5-2.6zm-4.7-37.1l4.8 13.7.8-.2-4.8-13.7zm-3.3 55.8h.8v2.7h-.8zm-22.8-.8l.8.3.9-2.6-.8-.2zm24.1-62l2.2 4.1.7-.4-2.2-4 3.5 3.2.6-.6-3.5-3.2 4.4 2.1.4-.7-4.4-2.1 4.9.7.1-.7-4.9-.7V74l4.9-.7-.1-.7-4.9.7 4.4-2.1-.4-.7-4.4 2.1 3.5-3.2-.6-.6-3.5 3.2 2.2-4-.7-.4-2.2 4.1h-.1l.8-4.5-.8-.1-.8 4.4-.8-4.4-.8.1.8 4.5h-.1l-2.2-4.1-.7.4 2.2 4-3.5-3.2-.6.6 3.5 3.2-4.4-2.1-.4.7 4.4 2.1-4.9-.7-.1.7 4.9.7v.1l-4.9.7.1.7 4.9-.7-4.4 2.1.4.7 4.4-2.1-3.5 3.2.6.6 3.5-3.2-2.2 4 .7.4 2.2-4.1h.1l-.8 4.5.8.1.8-4.4.8 4.4.8-.1-.8-4.5zM55.2 129l.7.3 4.9-13.7-.8-.3zm12.5-42.6l-2.4 4.3.7.4 2.5-4.4zm-5.3 22.1l.8.2 1.7-4.8-.8-.2zm.2-11.2l-.8-.3-6.9 12.5.8.3zm3.5 25.7l.9.1.4-2.6-.8-.1zm1.7-9.6l.8.2L71 99.7l-.8-.1zm3.6-20.7l.8.1.8-4.8-.8-.2zm-4.1 4.4l4.8-13.7-.8-.2-4.8 13.7zM79 99.7l2.4 13.9.8-.2-2.4-13.8zm-18.2-12l3.7-3.5-.6-.5-3.7 3.5zm64.7-6.7l-.2.8 2.9.4.1-.8zm-5.6 6.9l14.8 4.4.3-.7-14.9-4.5zm12.1 24.7l2.4 1.6.5-.6-2.4-1.6zM120 95l.3.7 2.6 1.2-.3-.7zm25.8-21.3h2.9v.8h-2.9zm-3.6 20.8l2.8.9.2-.8-2.8-.8zm0-40.9l.2.7 2.8-.8-.2-.8zM87.4 97.3l6.9 12.5.8-.3L88.2 97zm-2.3 6.6l1.7 4.8.8-.2-1.7-4.8zm12.7 12.2l1.3 2.4.8-.4-1.4-2.4zm-1.3 20l.9 2.6.8-.3-.9-2.5zm-7.3-20.5l4.9 13.7.7-.3-4.8-13.7zM113 100l12.7 8.4.5-.6-12.7-8.5zm3.3 27l1.7 2.1.7-.4-1.8-2.2zm-13.8-17.5l9.2 11.6.6-.4-9.2-11.7zm8.3-2l2 1.9.6-.5-2-1.9zm11.5-33.8h15.6v.8h-15.6zM62.6 50.8l-6.9-12.5-.8.3 6.9 12.5zm2.3-6.6l-1.7-4.8-.8.2 1.7 4.8zm-4.1-11.7l-4.9-13.7-.7.3L60 32.8zm-8.6-.5l-1.3-2.4-.8.4 1.4 2.4zm1.3-20l-.9-2.6-.8.3.9 2.5zm-19.8 9.1L32 19l-.7.4 1.8 2.2zm5.5 19.5l-2-1.9-.6.5 2 1.9zm8.3-2L38.3 27l-.6.4L46.9 39zM69.1 66l-9.2-11.7-.6.5 9.2 11.6zm-8.3-5.6l-.6.5 3.7 3.5.6-.5zm-7.2-.2l12.6 8.4.5-.6-12.6-8.4zm14.9 1.2L66 57l-.7.4 2.4 4.3zM37 48.1l-12.7-8.4-.5.6 12.7 8.5zm32.1 34l-.6-.4-9.2 11.6.6.5zm-2.6-30.9l4.8 13.7.8-.2L67.3 51zm.9-23.6l-.4-2.7-.9.2.5 2.6zM71 48.4l-2.4-13.9-.8.2 2.4 13.8zM12.1 73.7h15.6v.8H12.1zm24.4 25.6l-12.7 8.5.5.6L37 100zm-9.4-2.4l2.6-1.2-.3-.7-2.7 1.2zm-12 16.7l.5.6 2.4-1.6-.5-.6zm15-25.7l-.2-.8L15 91.6l.3.7zm-8.3-5.7l2.9-.4-.2-.8-2.8.4zm15.9 38.5l.6.4 9.2-11.6-.6-.5zm-8.3-67.6l.3-.7-2.6-1.2-.4.7zm1.9 75.6l.7.4 1.7-2.1-.6-.5zm7.3-21.7l-2 1.9.6.5 2-1.9zm-8.5-46.8l-14.8-4.4-.3.7L29.9 61zm-5.6 6.9l.2-.8-2.9-.4-.1.8zM18 35.5l-2.4-1.6-.5.6 2.4 1.6zM1.3 73.7h2.9v.8H1.3zm50.2 42l-1.4 2.4.8.4 1.3-2.4zM4.8 53.5l2.8.8.2-.7-2.8-.9zm0 41.1l.2.8 2.8-.9-.2-.7z"/>
        <path d="M42.2 39.2c.2.1 0 .3-.1.3.7-.2 1.4-.7 1-1.2-.6.5-.8.3-1.5.9-.6 0-.9-.2-.8-.4-.2.2-.8-.1-1.1.2.6.4 1.5.5 2.5.2zm6.5-1.7c0-.1 0-.1 0 0-.1 0-.1 0 0 0l-.2.2.2-.2c-.1 0 0 0 0 0zM34.5 51.6c.1 0 .1 0 0 0 .1-.1 0-.1 0 0zm14.3-14.3l.2-.2-.2.2zm-13.9 44c-.3.2-.4-1.3-.4.5.2-.2.3-.4.4-.5z" class="st1"/>
        <path d="M48.8 37.6v-.3c0 .1-.1.1-.1.1 0 .1 0 .2.1.2zm73.1 40.5v1.6c0-.5.1-1 0-1.6zm-72.3 65.2h-.4.4zm71.9-58.9c-.1.3.4.6.3.9 0 .1.1.1.1.2l-.4-1.1zm-.2-35.1c0-.5.1-1.2-.2-1.1l.1.5s0 .1-.1.1c0 0 .1.3.2.5zM44.5 39.2h.2-.2z" class="st1"/>
        <path d="M121.3 82.3c.7.1.5-2.8.1-3.8.2.3.2-.9.5-.5 0-1.2-.2-2.2-.6-2 .8-2.2-.5-4.3.6-5.5-.5-3.4-.5-6.6-.7-9.7.7.1.2 3.4.9 3.3-.4-2.9-1-4.6-.9-7.5.1-.8.3.4.4.7-.4-2.9-.1-5.7-.5-8.3-.4.5-.9-1.9-1.2-2.2.9.7.1-2.6 1.3-1.3-.1-.3-.2-.8-.4-.7 0-.5.2-.7.4-.2-.2-1.8-.5-1.2-.6-2.8.2 0 .2.3.4.5-.1-.2-.2-.4-.2-.6 0-.1 0-.1-.1-.2 0-.1 0-.2-.1-.3 0-.2-.1-.3-.1-.5-.1-.4-.1.5-.1.1v-.6c-.2-.1-.4.5-.6.4.2 0 .1-.2.5-.1l-1.1-.3c-.2-.1-.4-.1-.6-.2-.2 0-.4-.1-.6-.1-.5-.1-1.1-.2-1.6-.2-1.1-.1-2.1-.3-3.5-.6.5-.3.2-.4-.1-.5-.4-.1-.8-.2-1-.5-.5 0-1 .1-1.5.2l.6.3c-1.2 0-2.3-.2-3.4-.4l.9.4-1.1.4-.6-1.2c-1.9 1.1 2.2.9.3.4l.2.1c.1 0 .1 0 .2.1h-.2s-.1 0-.1.1c-.1 0-.1-.2-.1-.2-.1.1-.2-.5-.9-.6.1 0 .1 0 0 0h-.2c-.1 0-.2 0-.2-.1 0-.4-.1-.9-.1-1.2l-.3-.3c-.1-.1-.2-.3-.3-.4-.2-.3-.3-.6-.4-1.1.1-.3.7 0 .7-.2-.2-.1-.3-.3-.5-.6s-.3-.6-.5-1-.3-.7-.5-1-.4-.5-.6-.7c.2.2.5.1.5 0l-.6-.3c-.2-.6-.1-.7.1-.7-.4-.8-.5-.6-.6-.4s-.2.3-.5-.7c.1.1.1 0 .3.3-.4-1-1.1-1.8-1.7-2.6-.6-.8-1.3-1.5-1.8-2.3 0-.4.3-.1.6.2.3.3.5.6.5.2-.9-1.1-2.1-2.1-3.2-3s-2.3-1.7-3.4-2.6l.4.4c-.4.2-.7-.1-1.2-.6-.4-.5-1-1.1-1.6-1.2.3.1.6-.2.5-.1-1.5-1.1-3.5-1.7-6.2-2.3l.4-.1c-.2-.1-.5-.3-.9-.4l-1-.3c-.7-.2-1.4-.3-2-.5-.4.2-1 0-.7.4-.8-.4-1.7-.6-2.6-.7h-1.3c-.4 0-.9.1-1.3.2-.2 0-.4.1-.6.1s-.4.1-.6.1c-.4.1-.8.2-1.2.2-.2 0-.4 0-.6.1-.2 0-.4.1-.6.1h-1.2c.4-.1.9-.4.6-.3l-.7.2-.3.1V14l-1.3.5c.3.3.4.1 1 .2-.1.2-.4.3-.7.5-.3.2-.6.3-.9.4.5-.3.5-.4.2-.5-.2-.1-.7 0-1 0 .1.1 0 .3.1.3-.8-.1-.8.1-.8.4 0 .2-.1.5-1.1.7v-.2l-.9.6-.9.6c-.5-.2.6-.5.5-.9-.5.3-.9.7-1.3 1.1-.4.4-.8.8-1.3.8.2-.2.4-.4.6-.5.2-.2.4-.4.6-.5-.3 0-.5.1-.7.1s-.3.1-.4.2c-.2.1-.4.3-.8.4h.1l-.3.1c.1 0 .2-.1.2-.1-.3.1-.6.3-.9.5.2-.1.4-.2.5-.3l-.2.3-.8.5.5-.2c-.1.4-.3.8-.5 1-.2.3-.5.6-.8.8-.3.3-.6.5-.9.8-.3.3-.5.7-.7 1.2.8-1.8-.1-.5-.3-.9-.4.3-1.1.7-1 .4-.2.5-.5.7-.8 1s-.7.6-.8 1.3c-.2 0-.6.8-.8.4-.6 1 .4-.1.5.1-.3.9-1 1.7-1.7 2.6-.3.5-.7 1-1 1.5-.2.3-.3.6-.4.9-.1.3-.2.6-.2 1-.1.3-.1.5-.2.8 0 .3-.1.5-.1.7v1.1c0 .6.1 1.1 0 1.8 0 .2 0 .4-.1.5s-.2 0-.2-.2v-.6c-.2.5-.4.9-.6 1.3-.2.4-.3.8-.5 1.2 0-.2-.2-.1-.5-.1-.1.1-.2.2-.2.3s-.1.2-.1.3-.1.2-.2.2c-.1.1-.3.1-.5.2 0-.1.1-.2.2-.4 0-.1.1-.1.1-.2s.1-.2.1-.2c-.5.5-1.4.9-2.3 1.2-.3-.2.5-.5.8-.7-1 .3-2.7.5-3 1 .2 0 .4.1.5.1-.1-.1 0-.3.2-.4.9-.4 1.3 0 1.4.2-.2.1-.4.1-.7.2.4.4 1.1.3 1.9 0 .7-.3 1.5-.8 1.9-1.2 0 .2 0 .5-.1.7-2.1 1.2-7 1.2-10.7.6h-.1c.1-.1.1-.3.2-.4 0-.1.1-.2.1-.3.1.1.2.1.4.1l.4-.5h-.8c-.1-.1-.2-.3-.5-.4-.1 0-.2-.1-.4-.1h-.5c-.1 0-.2 0-.4.1-.1 0-.3.1-.4.2-.1.1-.3.2-.4.3-.1.1-.3.2-.4.4-.1.1-.1.3-.2.4-.1.1-.1.3-.1.4v.7c0 .4 0 .8.1 1.1-.1.2-.2.4-.4.6 0-.5 0-1 .1-1.7-.3.6-.3 1-.3 1.3s.2.6.3.8c-.1.1-.2.1-.2.2l-.1.1v.1c.1.7.4 1.2.6 1.8-.3.2-.5-.8-.7.4.3.8.6-.7.8.5-.3.8-.6.6-.3 1.5-.2.1-.3-.1-.4-.4.2.8.1 2.2.5 2.6-.4.8.2 2.7-.5 2.6.1.1.2.5.3.8.1.4.2.9.2 1.2-.8-1.3-.1 2.8-.9 2.4.7 1 .3 3.6.7 5.4-.1-.1-.2-.3-.1-.4-.1 1-.3 1.3-.4 1.9.6.1.7 1.7 1.1 2.5-.6 1.2-.7-.7-1.3-.4.5-.1.5 2.1.9 1.7-.4.9-.2.8-.7 1.3.8.2.1.9.6 1.6-.4 1.3-.7.3-.5 1.8-.2.7-.5-.6-.5-.6 0 1.5.6.7.9 1 .1 1.8-.4.8-.7 1.4.1 1.1.7 2 .6 2.8-.1.1-.1.2-.2 0 .4 1.2 0 3.5.6 4.9-.1.1-.1.2-.1.2.3-.2.6-.3.8-.2 0 .7.4 1.3 0 1.5 0-.4-.1-.4-.3-.6l.2.7c-.5.6-.2-1-.6-1 .2 1.4.6 3 .4 4.1-.5.2-.2-2.5-.6-1.1l.2-1.6c-.8 1.2.1-1-.8.2-.2 2.2.2 2.4.1 4.6.3.5.4-.2.7.3.5 3.1-1.3 2.4-.7 4.6.3.6 1 .8.6 2.4l-.6-.5c-.1 2.1.8 1.2.4 3.4-.2-.4-.2-1.6-.3-1.3-.5 1.4.3 1 .3 2.1h-.7c.1 2.2.4 4.7.5 7.1-.2-.1-.3-.6-.5 0 .2 3.1-.1 6.6-.5 9.6l.4 1.1c0 .3-.2.5-.3.2-.2 1.2.3.1.5.6 0 .7-.3.9-.4.5.4 2.1.8 5.9.3 8l-.1-.4c-.2 1.7.9 1.9.5 3.5l-.1-.3c-.1 1.8-.1 3.8-.1 5.6v2.4c0 .1 0 .3.1.4.1.4.1.9.2 1.3 0 .1 0 .2.1.3v.4c0 .2.1.3.1.4 0 .1.1.3.1.4.2.1.3.3.5.5s.5.5.9.7l.6.3c.2.1.4.1.6.2.3.1.6.2.9.2.6.1 1 0 1.1-.3.5.2.9.3 1.1.4.3.1.5.2.7.3.5.2 1 .4 2.5.6.8.1 1.2-.5 2.2-.6v.5l1.3-.5.7.6.9-.1c-.4 0-.8-.2-.7-.4 1.4-.2 3.4.4 3.5.7l3.3-.4c-.1.1-.4.2-.7.3 1.2-.3.1.6 1.6.1-.2-.1.1-.3.2-.4.8.3 2.6.3 4 .1l-.3.3c2.5.1 5.2-.2 7.9-.2-1-.2-.8-.7 0-.8l.3.5c.5-.3-.8-.2.2-.6 1 .1.7.6.1.8l1.2-.2c.1.2-.2.2-.3.4.5-.3 2.2.5 2.9-.1l.1.2c2.8 0 4-.2 6.2-.2 0-.4.9-.4 1.6-.7 1.6.1 3.5.4 5.5.3 1.4-.3.4-.4 1-.7.1.4 2.1.3 1.1.6 2.4-.1 3-.2 6-.6-.3-.2-.7-.2-.5-.4.5-.1 1.2.1 1.2.3h-.1c3.4-.7 7.8 1 10.5.1h-.1l1.4-.3h.4l.3-.1.7-.2c1.3 0-.8.4.2.5 1.5-.5 2.7-.6 3.8-.6 1.1-.1 2.2-.1 3.5-.6.3.1.7.2 1.1.2.2 0 .4 0 .7-.1.2 0 .7-.1 1.1-.3.5-.2 1.6-.4 2-.8.4-.4.7-.9.9-1.4.1-.3.2-.6.2-.9 0-.1 0-.3.1-.4v-1.5c0-1.4-.1-2.6.2-3.6l-.3.2c-.3-.7.1-.8.2-1.3-.2.1-.2.7-.4.3-.1-1.4-.1-2.9-.1-4.3 0-.7.1-1.5.1-2.2 0-.4.1-.7.1-1.1l.1-1.1c.3-3 .1-6 .4-9 .2-2.2-1.4-1.3-.6-4l.5.8c-.4-4.4.2-9-.2-13.3.1.3.3.3.2.7.4-.9-.1-3.3-.4-3.4.1-.7.3-.1.5-.5.3-.9-1-2.3-.6-2.8 0-.1.1.1.1.2-.1-.8.8-2.5.4-2 .1-.8.1-1.6.1-2.3v-.8c0-.1.6-.2.6-.3 0-.6-.7-.4-.6-1-.3-.2.4-2.1-.3-2.3zM35 106.1v-.7.7zm0 3v-1.3c.2-.1.3 0 .3.3-.1-.1-.2.5-.3 1zm40.5-95.2c0 .1.1.2.1.4-.3 0-.6.1-1 .1.1-.2.3-.3.9-.5zM52.3 30.3l.4-.2h.1c-.2.3-.3.7-.5 1.1v-.9zm-3 8.2c.1-.1.1-.2.2-.3.1-.1.1-.2.1-.3s.1-.2.1-.3c.2-.1.4-.1.5 0-.2.3-.4.6-.7.8 0 0-.1.1-.2.1 0 .1 0 0 0 0zm5.4 105c-.1 0-.2.1-.4.1.1-.1.2-.1.4-.1zm66.4-94.7z" class="st1"/>
        <path d="M120.2 40.4c.1 0 .1 0 .2.1-.1-.1-.1-.1-.2-.1zm1.1 51.4c0 .1-.6.2-.6.2 0-.1.6-.2.6-.2zm-74.9 51.5v-.1l-.3.1zM67.9 15zm-10.5 6.6c0 .1 0 .2.1.2l-.1-.2zm63.9 27.7v.2c.1.5.1.2 0-.2zm.6 28.6v.2-.2zM44.6 38.2c0 .1 0 .1 0 0h.2-.2zm-.3.2c.1 0 .2 0 .3-.1l-.3.1zm-.6.1c.2 0 .4-.1.6-.1-.2 0-.5 0-.6.1zm5.9-2.4c-.1 0 0 0 0 0zm.2-.9c.2-.3.4-.7.3-1-.2.5-.6 1.1-.7 1.7l.1.1c-.1-.2.1-.4.3-.8zM101 25.1l-.5-.1.8.8-.3-.7z" class="st1"/>
        <path d="M104 36.3c-1.5-1.3-1.7-4.5-2.4-6.3a28.38 28.38 0 0 0-26.2-17.9c-12.8 0-24 9.3-27.4 20.6-.3 1-.8 2-1 3 0 0-5.9-.1-6.6-.1-3 .2-7.6 1.9-7.6 1.9l-1.3 47s-1.7 25.6-1 37.3c.6 10.1 2.2 16.5 2.2 16.5l13.3.3 27.9.6 34.5-1.3s6 .3 8.6-1c.7-.4 1-2.4 1-2.4s-.6-59.4-.7-84.1c0-2.5.4-7.4 0-9.8-.2-1.2.4-3.8-1.9-3.5-4.1.8-9.6.8-11.4-.8z" class="st2"/>
        <path fill="#ea608f" d="M99.4 39.5c-.2-13.3-11-24.1-24.4-24.1S50.8 26.2 50.6 39.5H35.2v95.1h79.5V39.5H99.4zM75 23.8c8.8 0 15.9 7 16 15.7H58.9c.2-8.7 7.3-15.7 16.1-15.7z"/>
        <path d="M39.3 76.3c0-.5.2-.9.5-1.3s.7-.5 1.3-.5h2.3v-5.1c0-1.3.2-2.6.6-3.8.4-1.2 1-2.3 1.8-3.2s1.8-1.6 3.1-2.2c1.2-.5 2.7-.8 4.3-.8 1.1 0 2.2.1 3.1.4.9.3 1.7.7 2.4 1.2s1.3 1.1 1.8 1.8 1 1.4 1.3 2.2l-2.1 1.4c-.5.2-.9.3-1.2.3-.5 0-1-.2-1.4-.7-.3-.3-.5-.6-.8-.9s-.6-.5-.9-.7c-.3-.2-.6-.3-1-.4s-.8-.2-1.3-.2c-1.5 0-2.6.5-3.3 1.4-.7 1-1.1 2.3-1.1 4v5.1h8.8v2.1c0 .3-.1.7-.4.9-.3.3-.6.4-1.1.4h-7.3v4.2c0 .9-.2 1.8-.5 2.5-.4.7-.8 1.4-1.4 2 1.1-.2 2.1-.4 3.2-.4h12.6v2.2c0 .3-.1.5-.2.8-.1.3-.3.5-.5.7s-.4.4-.7.5-.6.2-.9.2H39.8v-3.3a5.78 5.78 0 0 0 2.6-1.3 3.34 3.34 0 0 0 1.1-2.6V78h-4.1v-1.7h-.1zm37-16.8c1.4 0 2.7.2 3.9.6 1.2.4 2.2 1 3 1.8s1.5 1.7 2 2.8.7 2.3.7 3.6a10.5 10.5 0 0 1-1.9 6c-.6.9-1.2 1.7-2 2.6-.8.8-1.6 1.7-2.4 2.5l-7 7.1c.7-.2 1.4-.4 2-.5.7-.1 1.3-.2 1.9-.2h8c.6 0 1 .2 1.4.5.3.3.5.7.5 1.3v3.2H65.2V89c0-.4.1-.7.2-1.1.2-.4.4-.7.7-1.1l9.4-9.4c.8-.8 1.5-1.6 2.1-2.3.6-.7 1.1-1.5 1.6-2.2.4-.7.7-1.4 1-2.2.2-.7.3-1.5.3-2.3 0-.7-.1-1.4-.3-2-.2-.6-.5-1-.9-1.4s-.9-.7-1.4-.9c-.6-.2-1.2-.3-1.9-.3-1.3 0-2.3.3-3.1 1-.8.6-1.4 1.5-1.7 2.6-.2.5-.4.9-.7 1.2-.3.2-.7.4-1.2.4-.2 0-.5 0-.7-.1l-2.8-.5c.2-1.5.6-2.8 1.2-3.9a9.1 9.1 0 0 1 5.5-4.5c1.1-.3 2.4-.5 3.8-.5zm34.9 15.8c0 2.7-.3 5.1-.9 7.1s-1.4 3.6-2.4 4.9-2.2 2.3-3.6 2.9-2.9 1-4.5 1-3.1-.3-4.5-1c-1.4-.6-2.6-1.6-3.6-2.9s-1.8-3-2.4-4.9c-.6-2-.9-4.3-.9-7.1 0-2.7.3-5.1.9-7.1s1.4-3.6 2.4-4.9c1-1.3 2.2-2.3 3.6-2.9 1.4-.6 2.9-1 4.5-1s3.1.3 4.5 1c1.4.6 2.6 1.6 3.6 2.9s1.8 2.9 2.4 4.9c.7 2.1.9 4.4.9 7.1zm-5.4 0c0-2.2-.2-4.1-.5-5.6s-.8-2.6-1.3-3.5a4.58 4.58 0 0 0-4.1-2.3c-.8 0-1.5.2-2.2.5-.7.4-1.3 1-1.9 1.8-.5.9-1 2-1.3 3.5S94 73 94 75.3c0 2.2.2 4.1.5 5.6s.8 2.6 1.3 3.5 1.2 1.5 1.9 1.8c.7.4 1.4.5 2.2.5.8 0 1.5-.2 2.2-.5.7-.4 1.3-1 1.9-1.8.6-.9 1-2 1.3-3.5.3-1.5.5-3.3.5-5.6zm-62.2 36.6c.4 0 .7 0 1 .1l.9.3h2.4v.7c0 .1 0 .2-.1.3-.1.1-.2.1-.3.1l-.7.1c.1.1.1.3.1.4v.5c0 .4-.1.8-.2 1.1-.2.3-.4.6-.7.8-.3.2-.6.4-1 .5s-.8.2-1.3.2c-.3 0-.6 0-.9-.1-.3.2-.4.3-.4.5s.1.3.2.4c.2.1.4.1.6.2s.5 0 .9 0h1c.3 0 .7.1 1 .1l.9.3c.3.1.5.3.6.6.2.3.2.6.2 1s-.1.7-.3 1.1c-.2.3-.4.7-.8.9-.3.3-.8.5-1.3.7s-1.1.2-1.7.2c-.6 0-1.2-.1-1.6-.2-.5-.1-.8-.3-1.2-.5-.3-.2-.5-.4-.7-.7-.2-.3-.2-.5-.2-.8 0-.4.1-.7.4-1 .2-.3.6-.5 1-.6-.2-.1-.4-.3-.5-.5s-.2-.4-.2-.7c0-.1 0-.3.1-.4 0-.1.1-.3.2-.4.1-.1.2-.3.3-.4s.3-.2.5-.3c-.4-.2-.7-.5-1-.9-.2-.4-.4-.8-.4-1.3 0-.4.1-.8.2-1.1.2-.3.4-.6.7-.8s.6-.4 1-.5c.4.1.8.1 1.3.1zm2.2 8.7c0-.2 0-.3-.1-.4s-.2-.2-.4-.2c-.2-.1-.4-.1-.6-.1h-1.5c-.3 0-.5 0-.8-.1-.2.1-.4.3-.5.4-.1.2-.2.4-.2.6 0 .1 0 .3.1.4l.3.3c.2.1.4.2.6.2.3.1.6.1.9.1.4 0 .7 0 1-.1s.5-.1.7-.2.3-.2.4-.4c.1-.1.1-.3.1-.5zm-2.2-4.7c.2 0 .5 0 .6-.1.2-.1.3-.2.5-.3.1-.1.2-.3.3-.4.1-.2.1-.3.1-.5 0-.4-.1-.7-.4-1-.2-.2-.6-.4-1.1-.4s-.9.1-1.1.4c-.2.2-.4.6-.4 1 0 .2 0 .4.1.5.1.2.2.3.3.4s.3.2.5.3c.2.1.4.1.6.1zm9-4c.6 0 1.2.1 1.7.3.5.2.9.5 1.3.8.4.4.6.8.8 1.3s.3 1.1.3 1.8-.1 1.2-.3 1.8a3.8 3.8 0 0 1-3.8 2.5 3.8 3.8 0 0 1-3.8-2.5c-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .8-1.3.4-.4.8-.6 1.3-.8.6-.2 1.1-.3 1.7-.3zm0 7c.7 0 1.2-.2 1.5-.7s.5-1.1.5-2-.2-1.6-.5-2c-.3-.5-.8-.7-1.5-.7s-1.2.2-1.6.7c-.3.5-.5 1.2-.5 2 0 .9.2 1.6.5 2 .4.4.9.7 1.6.7zm9.2-7c.6 0 1.2.1 1.7.3.5.2.9.5 1.3.8.4.4.6.8.8 1.3.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8a3.8 3.8 0 0 1-3.8 2.5 3.8 3.8 0 0 1-3.8-2.5c-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .8-1.3.4-.4.8-.6 1.3-.8.5-.2 1.1-.3 1.7-.3zm0 7c.7 0 1.2-.2 1.5-.7s.5-1.1.5-2-.2-1.6-.5-2c-.3-.5-.8-.7-1.5-.7s-1.2.2-1.6.7c-.3.5-.5 1.2-.5 2 0 .9.2 1.6.5 2 .4.4.9.7 1.6.7zm11.5 1.4c-.3 0-.4-.1-.5-.4l-.2-.8-.5.5c-.2.2-.4.3-.6.4s-.5.2-.7.3c-.3.1-.5.1-.8.1-.5 0-.9-.1-1.2-.3-.4-.2-.7-.5-1-.8-.3-.4-.5-.8-.6-1.3s-.2-1.1-.2-1.8c0-.6.1-1.2.3-1.7s.4-1 .7-1.4c.3-.4.7-.7 1.1-.9.4-.2.9-.3 1.5-.3.5 0 .9.1 1.2.2.3.1.6.3.9.6v-4.4h2v12h-1.4zm-2.6-1.5c.4 0 .8-.1 1.1-.3.3-.2.6-.4.8-.7v-3.7c-.2-.3-.5-.5-.7-.6-.3-.1-.6-.2-.9-.2s-.6.1-.8.2c-.2.1-.5.3-.6.5-.2.2-.3.5-.4.9s-.1.8-.1 1.2c0 .5 0 .9.1 1.2.1.3.2.6.3.8.1.2.3.4.5.5.2.2.4.2.7.2zm8.9 3.8c-.1.1-.1.2-.2.3-.1.1-.2.1-.4.1h-1.5l1.6-3.3-3.4-7.7h1.7c.2 0 .3 0 .4.1s.2.2.2.3l1.8 4.3c.1.1.1.3.2.4 0 .2.1.3.1.5 0-.2.1-.3.1-.5.1-.1.1-.3.2-.4l1.7-4.3c0-.1.1-.2.2-.3.1-.1.2-.1.3-.1h1.6l-4.6 10.6zm5.7-2.3v-12h2v4.7a3.34 3.34 0 0 1 2.6-1.1c.5 0 .9.1 1.2.3.4.2.7.5 1 .8.3.4.5.8.6 1.3s.2 1.1.2 1.8c0 .6-.1 1.2-.3 1.7-.2.5-.4 1-.7 1.4-.3.4-.7.7-1.1.9-.4.2-.9.3-1.5.3-.3 0-.5 0-.7-.1s-.4-.1-.6-.2-.3-.2-.5-.3l-.4-.4-.1.6c0 .1-.1.2-.2.3-.1.1-.2.1-.3.1l-1.2-.1zm3.9-6.9c-.4 0-.8.1-1.1.3-.3.2-.6.4-.8.7v3.7c.2.3.5.5.7.6.3.1.6.2.9.2s.6-.1.8-.2c.2-.1.4-.3.6-.5s.3-.5.4-.9.1-.8.1-1.2c0-.5 0-.9-.1-1.2-.1-.3-.2-.6-.3-.8-.1-.2-.3-.4-.5-.5s-.4-.2-.7-.2zm11.8 6.9h-.9c-.2 0-.3 0-.4-.1s-.2-.2-.2-.3l-.2-.6c-.2.2-.4.4-.6.5s-.4.3-.6.4-.4.2-.7.2c-.2 0-.5.1-.8.1-.4 0-.7 0-1-.1s-.6-.2-.8-.4c-.2-.2-.4-.4-.5-.7-.1-.3-.2-.6-.2-1 0-.3.1-.6.2-.9s.4-.6.8-.8c.4-.2.9-.4 1.5-.6s1.4-.2 2.4-.2v-.5c0-.6-.1-1-.4-1.2-.2-.3-.6-.4-1-.4-.3 0-.6 0-.8.1l-.6.3c-.2.1-.3.2-.4.3-.1.1-.3.1-.4.1s-.3 0-.3-.1c-.1-.1-.2-.2-.2-.3l-.4-.6c1-.9 2.1-1.3 3.4-1.3.5 0 .9.1 1.3.2.4.2.7.4 1 .7.3.3.5.6.6 1s.2.8.2 1.3v4.9zm-3.9-1.3c.2 0 .4 0 .6-.1.2 0 .3-.1.5-.2s.3-.2.4-.3c.1-.1.3-.2.4-.4v-1.4c-.6 0-1.1 0-1.5.1s-.7.2-.9.3c-.2.1-.4.2-.5.4-.1.2-.1.3-.1.5 0 .4.1.6.3.8.2.3.5.3.8.3zm8.7-7.1c.4 0 .7 0 1 .1l.9.3h2.4v.7c0 .1 0 .2-.1.3-.1.1-.2.1-.3.1l-.7.1c.1.1.1.3.1.4v.5c0 .4-.1.8-.2 1.1-.2.3-.4.6-.7.8-.3.2-.6.4-1 .5s-.8.2-1.3.2c-.3 0-.6 0-.9-.1-.3.2-.4.3-.4.5s.1.3.2.4c.2.1.4.1.6.2s.5 0 .9 0h1c.3 0 .7.1 1 .1l.9.3c.3.1.5.3.6.6.2.3.2.6.2 1s-.1.7-.3 1.1c-.2.3-.4.7-.8.9-.3.3-.8.5-1.3.7s-1.1.2-1.7.2-1.2-.1-1.6-.2c-.5-.1-.8-.3-1.2-.5s-.5-.4-.7-.7c-.2-.3-.2-.5-.2-.8 0-.4.1-.7.4-1 .2-.3.6-.5 1-.6-.2-.1-.4-.3-.5-.5s-.2-.4-.2-.7c0-.1 0-.3.1-.4 0-.1.1-.3.2-.4s.2-.3.3-.4c.1-.1.3-.2.5-.3-.4-.2-.7-.5-1-.9-.2-.4-.4-.8-.4-1.3 0-.4.1-.8.2-1.1.2-.3.4-.6.7-.8s.6-.4 1-.5c.4.1.9.1 1.3.1zm2.2 8.7c0-.2 0-.3-.1-.4s-.2-.2-.4-.2c-.2-.1-.4-.1-.6-.1h-1.5c-.3 0-.5 0-.8-.1-.2.1-.4.3-.5.4-.1.2-.2.4-.2.6 0 .1 0 .3.1.4l.3.3c.2.1.4.2.6.2.3.1.6.1.9.1.4 0 .7 0 1-.1s.5-.1.7-.2.3-.2.4-.4c.1-.1.1-.3.1-.5zm-2.2-4.7c.2 0 .5 0 .6-.1.2-.1.3-.2.5-.3.1-.1.2-.3.3-.4.1-.2.1-.3.1-.5 0-.4-.1-.7-.4-1-.2-.2-.6-.4-1.1-.4s-.9.1-1.1.4c-.2.2-.4.6-.4 1 0 .2 0 .4.1.5.1.2.2.3.3.4.1.1.3.2.5.3.2.1.4.1.6.1z" class="st2"/>
      </svg>
    </div>
    <div class="gg-o-media__content">
      <dl class="gg-c-goodybag-meter__info">
         <dt>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="77.7 71.1 844.1 857.8" class="gg-u-icon gg-u-icon--inline gg-u-icon--small gg-c-goodybag-meter__icon" aria-hidden="true"><path d="M830.3 768.6c-16.9-7.1-45.5-17.4-86.4-27 22.2-57.4 39.1-127.3 42.8-210.5h135.5c-6.3 89.5-39.7 171.5-91.9 237.5zm-202 62.8c10.1-14.3 19.4-29.2 28-44.4-35.5-4.9-77-8.4-124.8-9.3v151c1.2-.1 2.3-.2 3.5-.3 14.6-10.5 54.2-41.8 93.3-97zm201.8-600.3c-16.9 7.1-45.1 17.2-85.4 26.7 22.4 57.9 39.3 128.6 42.3 213h135.4c-6.1-90.3-39.7-173.1-92.3-239.7zM675.5 869c-8.6 12-17.2 23-25.7 33 50.8-19.6 97-48.9 136.3-85.6-16.3-5.7-38.7-12.3-67.4-18.5-14.1 27.7-29 51.4-43.2 71.1zm-144-151.6c59.5 1.1 110.2 6 152.4 12.7 24.8-60.4 39-126.9 42.3-198.9H531.5v186.2zm153.2-447.9c-42.4 6.7-93.3 11.7-153.2 12.8v188.5h195.1c-2.7-73.2-16.8-140.5-41.9-201.3zM649.4 97.7c7.8 9 15.7 18.8 23.6 29.5 15.2 20.5 31.3 45.3 46.4 74.6 28.4-6.1 50.5-12.7 66.7-18.4-39.4-36.8-85.8-66.1-136.7-85.7zM532.1 71.3h-.6V222c48.1-.9 89.8-4.4 125.3-9.2-9.3-16.2-19.4-32-30.5-47.1-39-53.3-78.5-83.5-94.2-94.4zM261.1 749c-23.6-58.7-41.8-131.1-45.7-217.9H77.8c6.7 94.3 43.4 180.2 100.5 248 18.6-8.6 46.3-19.7 82.8-30.1zM77.7 470.8h137.5c3.1-88 21.3-161.2 45.2-220.4-36-10.3-63.4-21.3-81.9-29.8-57.6 68.3-94.5 155-100.8 250.2zm393.5-188.9c-58.5-2-109.1-8.6-151.7-17.1-26.4 62.1-41.2 130.9-43.9 206.1h195.7v-189zm0-210.8h-.9c-15.6 10.7-55.3 41.1-94.5 94.5-10.1 13.8-19.5 28.2-28.1 43 35.6 6.4 76.8 11.3 123.5 13V71.1zm0 460H275.8c3.9 81.2 21.4 148.7 44.5 203.6 42.4-8.5 92.8-15 150.8-16.9V531.1zm-3.8 397.6c1.3.1 2.5.2 3.8.2V778.1c-46.6 1.6-87.6 6.4-123.1 12.7 46.8 81.8 101.8 125.3 119.3 137.9zM329.1 127.2c8.3-11.1 16.6-21.3 24.7-30.7-47.9 18-91.8 44.5-129.8 77.8 16.2 6.4 37 13.7 62.4 20.5 14-26.3 28.7-48.8 42.7-67.6zM326.6 869c-13-18.2-26.7-39.6-39.8-64.5-25.8 7-46.9 14.3-63.2 20.8 38 33.3 81.9 59.9 129.8 78-8.9-10.3-17.9-21.8-26.8-34.3z"/></svg>
           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>
            <svg xmlns="http://www.w3.org/2000/svg" x="11000" viewBox="127.46 80.8 762.84 835.01" class="gg-u-icon gg-u-icon--inline gg-u-icon--small gg-c-goodybag-meter__icon" aria-hidden="true">
              <path d="M890.3 805.9a122.5 122.5 0 0 1-24.7 48.9c-12.9 15.5-29.7 25.8-47.3 34.8-32.2 16.6-66 25.9-100.7 26.2C588.9 917 422.8 837.3 293 684.1 116.5 475.5 74.5 220.9 199.2 115.3c5.6-4.8 12-11 24-18 16.2-9.6 33.9-14.9 52.2-16.5L447.8 373c-4.4 6.6-9.5 15.6-13.5 20.1-30.8 34.4-78.6 43.8-121.5 42.6 0 0-15 25.3 94.2 154.3 91.3 112.3 139.1 120.3 139.1 120.3 6-42.1 22.9-87.6 61.9-111.9 5-3.1 14.4-6.3 21.4-9.5l260.9 217z"/>
            </svg>
           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>
           <svg xmlns="http://www.w3.org/2000/svg" x="22000" viewBox="101.3 133 794.8 733.8" class="gg-u-icon gg-u-icon--inline gg-u-icon--small gg-c-goodybag-meter__icon" aria-hidden="true">
            <path d="M101.3 133v488.4h332.4L672 866.8V621.4h224.1V133z"/>
          </svg>
           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>
  </div>
</div>