600 West

Plansummary 

<div class="PlanSummary">
    <div class="PlanSummary-header icon _building-agency _before">
        <h3 class="_large">Free evaluation</h3>
        <p>Use Bambu by for free for an unlimited time.</p>
        <h4>$0</h4>
        <h5 class="fineprint">&nbsp;</h5>
    </div>
    <div class="PlanSummary-content">
        <a class="button _large" href="javascript:void(0);">Request an evaluation</a>
        <ul>
            <li>Up to 100 users based on company size</li>
            <li>No feature limitations</li>
            <li>Unlimited evaluation</li>
        </ul>
    </div>
</div>

<div class="PlanSummary">
    <div class="PlanSummary-header icon _building-enterprise _before">
        <h3>Full implementation</h3>
        <p>Roll-out Bambu to your entire organization.</p>
        <h4>Custom</h4>
        <h5 class="fineprint">Quote / Pricing</h5>
    </div>
    <div class="PlanSummary-content">
        <a class="button _large" href="javascript:void(0);">Request more info</a>
        <ul>
            <li>Custom plans &amp; implementation</li>
            <li>Advocacy solutions</li>
            <li>Services support</li>
        </ul>
    </div>
</div>
 
<div class="PlanSummary">
    <div class="PlanSummary-header icon _building-agency _before">
        <h3 class="_large">Free evaluation</h3>
        <p>Use Bambu by for free for an unlimited time.</p>
        <h4>$0</h4>
        <h5 class="fineprint">&nbsp;</h5>
    </div>
    <div class="PlanSummary-content">
        <a class="button _large" href="javascript:void(0);">Request an evaluation</a>
        <ul>
            <li>Up to 100 users based on company size</li>
            <li>No feature limitations</li>
            <li>Unlimited evaluation</li>
        </ul>
    </div>
</div>

<div class="PlanSummary">
    <div class="PlanSummary-header icon _building-enterprise _before">
        <h3>Full implementation</h3>
        <p>Roll-out Bambu to your entire organization.</p>
        <h4>Custom</h4>
        <h5 class="fineprint">Quote / Pricing</h5>
    </div>
    <div class="PlanSummary-content">
        <a class="button _large" href="javascript:void(0);">Request more info</a>
        <ul>
            <li>Custom plans &amp; implementation</li>
            <li>Advocacy solutions</li> 
            <li>Services support</li>
        </ul>
    </div>
</div>
 
{
  "modifier": null,
  "style": null
}
  • Content: 
    .PlanSummary {
    padding: 3rem 1.5rem;
    margin-right: 1rem;
    text-align: center;
    border: 2px solid get-color(neutral, 200);
    border-radius: $Border-radius--500;
    h3,
    h4,
    h5 {
        @include font-weight-normal;
    }
    &-header {
        &.icon._before::before {
            font-size: 4rem;
            color: theme-color(main);
        }
        h3 {
            @include font-size-subhead;
            text-transform: none;
            letter-spacing: 0;
        }
        h4 {
            @include font-size-head;
            padding-top: 2rem;
            padding-bottom: 0;
            line-height: 1;
            color: theme-color(secondary, dark);
            & + h5 {
                padding-top: 0;
            }
        }
        h5,
        p {
            color: theme-color(secondary);
        }
    }
    &-content {
        .button {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        ul {
            @include unstyled-list;
            color: theme-color(secondary);
            li {
                @include font-size-small;
                line-height: 2.5;
                li + li {
                    margin-top: 0;
                }
            }
        }
    }
    &:hover {
        border-color: theme-color(main);
    }
}
  • URL: /components/raw/plansummary/PlanSummary.scss
  • Filesystem Path: components/molecules/PlanSummary/PlanSummary.scss
  • Size: 1.3 KB

There are no notes for this item.