goodybag with details

This little beauty shows what comes with a goodybag


How it looks

View demo Open in new window
320 x 568
View code
<div class="gg-goodybag-detailed__container">
  <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-goodybag-detailed__details">
    <div class="gg-goodybag-detailed__details--item">
      <dt class="gg-goodybag-detailed__icon gg-goodybag-detailed__icon--data"><span class="gg-goodybag-detailed__sr-only">Data:</span></dt>
      <dd class="gg-goodybag-detailed__value">20 GB Data</dd>
    </div>
    <div class="gg-goodybag-detailed__details--item">
      <dt class="gg-goodybag-detailed__icon gg-goodybag-detailed__icon--minutes"><span class="gg-goodybag-detailed__sr-only">Minutes:</span></dt>
      <dd class="gg-goodybag-detailed__value">Unlimited minutes</dd>
    </div>
    <div class="gg-goodybag-detailed__details--item">
      <dt class="gg-goodybag-detailed__icon gg-goodybag-detailed__icon--texts"><span class="gg-goodybag-detailed__sr-only">Texts:</span></dt>
      <dd class="gg-goodybag-detailed__value">Unlimited texts</dd>
    </div>
  </dl>
</div>