<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>

<div class="hipsum">
  <h3>hipster ipsum</h3>
  <p>Letterpress sriracha prism, air plant four dollar toast fingerstache knausgaard beard. Neutra salvia blog affogato, glossier mlkshk hoodie austin banjo
    occupy. Woke forage plaid, live-edge VHS street art DIY tattooed fingerstache single-origin coffee. Selfies cred gluten-free, gastropub raw denim jianbing
    migas hexagon typewriter succulents hella venmo lumbersexual XOXO. Tilde selvage synth kogi bushwick. Art party ennui 90's tote bag fingerstache, taxidermy
    meh XOXO offal seitan wolf glossier echo park. Pork belly edison bulb selvage semiotics, woke cred enamel pin asymmetrical deep v tbh XOXO kinfolk af.</p>
  <p>Actually pickled tilde shabby chic vexillologist farm-to-table, YOLO hexagon ennui iPhone whatever kinfolk freegan. Biodiesel gluten-free swag hella.
    Literally coloring book intelligentsia, XOXO polaroid leggings four dollar toast unicorn celiac selvage hexagon street art YOLO tumblr. Taxidermy fanny pack
    intelligentsia la croix disrupt. Umami kogi food truck, live-edge vegan polaroid crucifix austin quinoa whatever. Vice blue bottle shabby chic readymade
    polaroid edison bulb helvetica, tousled chia vinyl leggings meditation chambray bitters kinfolk. Cornhole activated charcoal echo park, hell of prism man
    braid deep v.</p>
  <p>Plaid copper mug pabst affogato, messenger bag mustache bitters hoodie gentrify meggings seitan intelligentsia. Vexillologist asymmetrical messenger bag
    scenester. Banjo twee tumblr, asymmetrical succulents vexillologist echo park paleo narwhal DIY. Vice art party cornhole, biodiesel hexagon man bun ugh
    viral forage sustainable green juice keytar. Hot chicken fingerstache mlkshk, occupy church-key YOLO pickled organic godard polaroid flexitarian. Etsy fap
    cronut prism sriracha man braid. Pug gastropub craft beer, art party mixtape fingerstache celiac.</p>
  <p>Microdosing copper mug twee PBR&amp;B, celiac knausgaard butcher YOLO offal tacos selvage vinyl chia. Mustache asymmetrical celiac synth, literally
    whatever authentic intelligentsia drinking vinegar shoreditch tofu chambray tbh. Portland disrupt slow-carb celiac kale chips meh helvetica, twee vegan echo
    park. Glossier before they sold out kickstarter, distillery paleo artisan whatever pork belly pickled kale chips tousled hammock poutine keffiyeh pour-over.
    Intelligentsia locavore gentrify, semiotics austin slow-carb hell of meggings photo booth pug fingerstache PBR&amp;B viral. Hammock chartreuse edison bulb
    jianbing, hoodie four dollar toast master cleanse venmo microdosing shoreditch. Kinfolk trust fund photo booth microdosing meh.</p>
  <p>Fashion axe activated charcoal cred, knausgaard bespoke pop-up godard craft beer. Poke tattooed brunch, brooklyn quinoa truffaut trust fund vaporware
    butcher. Freegan kogi quinoa YOLO woke, meh single-origin coffee tbh pop-up artisan meggings iceland hoodie. Distillery thundercats hexagon, health goth +1
    subway tile kogi farm-to-table yuccie viral forage. Vaporware vegan franzen, slow-carb lo-fi vice leggings celiac selvage sriracha tacos viral banjo raw
    denim. PBR&amp;B swag kogi readymade, lomo vinyl etsy deep v iPhone. Lyft snackwave slow-carb everyday carry sartorial typewriter, offal hell of YOLO plaid
    mlkshk.</p>
</div>
