Source:
_frost-styleguide.scss, line 84
Progress indicator
This is Progress indicator
Example
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
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