Source: _frost-styleguide.scss, line 84
Example
  • Email
  • Account
  • Giving Page
Markup: progress-indicator.twig
<div>
  <ul class="progress-indicator__steps-3 progress-indicator">
    <li class="progress-indicator--done">
      <span class="progress-indicator__step-link">
      <span class="progress-indicator__step progress-indicator__circle"></span>
        <span class="progress-bar__title">
          Email
        </span>
      </span>
    </li>
    <li class="progress-indicator--active">
      <span class="progress-indicator__step-link">
      <span class="progress-indicator__step progress-indicator__circle"></span>
        <span class="progress-bar__title">
          Account
        </span>
      </span>
    </li>
    <li class="progress-indicator--todo">
      <span class="progress-indicator__step-link">
      <span class="progress-indicator__step progress-indicator__circle"></span>
        <span class="progress-bar__title">
          Giving Page
        </span>
      </span>
    </li>
  </ul>
</div>
Source: _frost-styleguide.scss, line 88
Example
Set a fundraising target

Be ambitious.You can do it

£
3

Thanks to you, at least three children living and working on the streets of Liberia could go to school for an entire year.

Markup: fundraising-target.twig
<div class="userFrTarget">
  <div class="amount">
    <h6>Set a fundraising target</h6>
    <p class="form__subcopy">Be ambitious.You can do it</p>
    <div>
      <span class="pounds-typography">£</span>
      <input type="text" autocomplete="on" class="form__input extra" id="userFrTarget" name="userFrTarget" value="150" maxlength="6">
    </div>
  </div>
  <div class="copy">
    <div class="digit digit-1">
      <span>3</span>
    </div>
    <div class="digit-copy">
      <div>
        <p>
          Thanks to you, at least <strong>three</strong> children living and 
          working on the streets of Liberia could go to school for an entire year.
        </p>
      </div>
    </div>
  </div>
</div>
Source: _frost-styleguide.scss, line 96
Example
What you can expect to receive from us

Name, email and billing address: we need it to create a receipt for your payment nd send it to you.

Phone number: we collect it in case there is an issue with donation

Establishment information: we use this information to understand better which institutions raise money for us.

Markup: just-in-time-block.twig
<div class="form__row form__row--just-in-time-block">
 <div class="form__fieldset">
  <a href="#show" aria-expanded="true" class="link toggle-link show-link" aria-label="click to open" id="show">What you can expect to receive from us</a>
  <a href="#hide" class="link toggle-link close-link" aria-label="click to close" aria-expanded="false" id="hide">What you can expect to receive from us</a>
  <div class="just-in-time--content">
    <p><strong>Name, email and billing address:</strong> we need it to create a receipt for your payment nd send it to you.</p>
    <p><strong>Phone number:</strong> we collect it in case there is an issue with donation</p>
    <p><strong>Establishment information:</strong> we use this information to understand better which institutions raise money for us.</p>
  </div>
</div>
</div>
Source: _frost-styleguide.scss, line 102