Plan Cards

The plan card is one of the most important reusable components for the site, and it's important that they are clean and easy to read at all screen sizes.

The plan cards can be displayed in any of the 4 brand colors - gray, green, yellow, and blue. The badge is optional and should only be displayed for plans that are top ranked in their category. All plans without a badge should use the default gray color.

246
6.55
8 months fixed
Best Overall
230
6.42
12 months fixed
Best for the Planet
263
6.71
6 months fixed
Best Short Term
225
6.40
12 months fixed
Most Popular
<div class="ce-plancard v-blue">
    <section class="info">
        <div class="price">
            <div class="monthlyCost">
                246
                <label>approx. per month</label>
            </div>
            <div class="unitCost">
                6.55
                <label>¢ / kWh</label>
            </div>
        </div>
        <div class="details">
            <h5 class="term">8 months fixed</h5>
            <div class="logo">
                <img src="/trinity/images/ConEd_optimized.png" alt="supplier logo">
            </div>
            <span class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
            </span>
            <div class="angle"></div>
        </div>
    </section>

    <section class="badge">
        <div class="label">Best Overall</div>
        <div class="angle"></div>
    </section>
</div>