<div class="js-sub-pencil o-sub-pencil" hidden="hidden">
  <div class="o-sub-pencil__box">
    <div class="o-sub-pencil__control o-sub-pencil__control--sm">
      <button class="js-sub-pencil-control o-sub-pencil__button" type="button"
       aria-expanded="true" aria-controls="aria-sub-pencil-tier-sm" aria-label="Toggle region">
        <svg class="o-sub-pencil__button__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-up"></use>
        </svg>
        <span class="u-visually-hidden">Toggle panel</span>
      </button>
    </div>
    <div class="o-sub-pencil__tier o-sub-pencil__tier--sm" id="aria-sub-pencil-tier-sm">
      <div class="o-sub-pencil__icon o-sub-pencil__icon--sm" aria-label="Unlimited">
        <svg class="o-sub-pencil__icon__art o-sub-pencil__icon__art--sm" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </div>
      <div class="o-sub-pencil__offer">
        <div class="o-sub-pencil__offer__try">
          <div class="o-sub-pencil__offer__try-xs">Try globeandmail.com for</div>
          <div class="o-sub-pencil__offer__try-sm">Support quality journalism</div>
        </div>
        <div class="o-sub-pencil__offer__cost">
          <div class="o-sub-pencil__offer__cost-xs">Just 99¢ per week</div>
          <div class="o-sub-pencil__offer__cost-sm">Just 99¢ per week for the first four weeks</div>
        </div>
      </div>
      <div class="o-sub-pencil__cta">
        <a href="#" class="o-sub-pencil__cta__btn o-sub-pencil__cta__btn--mustard o-sub-pencil__cta__btn--xs">
          <span class="o-sub-pencil__cta__text">Click here</span>
        </a>
        <a href="#" class="o-sub-pencil__cta__btn o-sub-pencil__cta__btn--mustard o-sub-pencil__cta__btn--sm">
          <span class="o-sub-pencil__cta__text">Start today</span>
        </a>
      </div>
    </div>
    <div class="o-sub-pencil__tier o-sub-pencil__tier--lg" id="aria-sub-pencil-tier-lg">
      <div class="o-sub-pencil__access">
        <div class="o-sub-pencil__access__cta">
          <div class="o-sub-pencil__access__cta-text">
            <div class="o-sub-pencil__icon o-sub-pencil__icon--lg" aria-label="Unlimited">
              <svg class="o-sub-pencil__icon__art o-sub-pencil__icon__art--lg" role="img" pointer-events="none" focusable="false" aria-hidden="true">
                <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
              </svg>
            </div>
            <span>Support quality journalism</span>
          </div>
          <a class="o-sub-pencil__access__cta-btn" href="#">Get full access to globeandmail.com</a>
        </div>
        <div class="o-sub-pencil__access__art">
          <img class="o-sub-pencil__access__art-img" src="{{ basePath }}/assets/patterns/images/sub-pencil-presentation.png" alt="Globe and Mail website displayed on various devices">
        </div>
      </div>
      <div class="o-sub-pencil__cost">
        <div class="o-sub-pencil__cost__just">
          <span class="o-sub-pencil__cost__just-text">Just</span><span class="o-sub-pencil__cost__just-price">99¢</span>
        </div>
        <div class="o-sub-pencil__cost__per">
          <span>per week<br>for the first four weeks<br><br></span>
        </div>
        <div class="o-sub-pencil__cost__cta">
          <a href="#" class="o-sub-pencil__cta__btn o-sub-pencil__cta__btn--mustard o-sub-pencil__cta__btn--lg">
            <span class="o-sub-pencil__cost__text">Start today</span>
          </a>
        </div>
      </div>
    </div>
    <div class="o-sub-pencil__control o-sub-pencil__control--lg">
      <button class="js-sub-pencil-control o-sub-pencil__button" type="button"
        aria-expanded="true" aria-controls="aria-sub-pencil-tier-lg" aria-label="Toggle region">
        <svg class="o-sub-pencil__button__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-up"></use>
        </svg>
        <span class="u-visually-hidden">Toggle panel</span>
      </button>
    </div>
  </div>
</div>
