Fees

Example

Early Registration Fee

USD 650
Early registration period ends on October 17th and is available for all exam levels.
Registration is Closed

Standard Registration Fee

USD 950
Standard registration period ends on February 13th and is available for all exam levels.
Register Today

Late Registration Fee

USD 1,380
Late registration period ends on March 13th.
Unavailable at This Time

Code

HTML

<div class="fees-container full-width">
    <div class="fees-registration">
        <div class="fees-header">
            <p>Early Registration Fee</p>
            <span class="fees-currency">USD</span> <span class="fees-cost">650</span>
        </div>
        <div class="fees-body">
            <p>Early registration period ends on October 17th and is available for all exam levels.</p>
            <span class="button disabled">Registration is Closed</span>
        </div>
    </div>

    <div class="fees-registration">
        <div class="fees-header fees-current">
            <p>Standard Registration Fee</p>
            <span class="fees-currency">USD</span> <span class="fees-cost">950</span>
        </div>
        <div class="fees-body">
            <p>Standard registration period ends on February 13th and is available for all exam levels.</p>
            <a href="#" class="button">Register Today</a>
        </div>
    </div>

    <div class="fees-registration">
        <div class="fees-header fees-future">
            <p>Late Registration Fee</p>
            <span class="fees-currency">USD</span> <span class="fees-cost">1,380</span>
        </div>
        <div class="fees-body">
            <p>Late registration period ends on March 13th.</p>
            <span class="button disabled">Unavailable at This Time</span>
        </div>
    </div>
</div>
        

Documentation

Problem Being Solved

We want a way to display the current price of registering, as well as previous and future costs.

When To Use

When displaying one or more open registration fee.