Pricing Card

<div class="pricing-card">

  <span class="pricing-badge">POPULAR</span>

  <h2>Pro Plan</h2>

  <div class="pricing-price">
    <span class="pricing-currency">$</span>
    <strong>29</strong>
    <span class="pricing-period">/month</span>
  </div>

  <p class="pricing-desc">
    Perfect for growing projects and professional websites.
  </p>

  <ul class="pricing-features">
    <li>Unlimited Projects</li>
    <li>Premium Components</li>
    <li>Priority Support</li>
    <li>Commercial Use</li>
  </ul>

  <a href="#" class="pricing-btn">
    Get Started
  </a>

</div>

.pricing-card{
  width:100%;
  max-width:340px;
  padding:32px;
  background:#08111f;
  border:1px solid rgba(139,92,246,.35);
  border-radius:20px;
  color:#ffffff;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.pricing-card:hover{
  transform:translateY(-7px);
  border-color:#8b5cf6;
  box-shadow:
    0 26px 55px rgba(0,0,0,.35),
    0 0 30px rgba(139,92,246,.18);
}

.pricing-badge{
  display:inline-block;
  margin-bottom:18px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(139,92,246,.15);
  color:#c4b5fd;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

.pricing-card h2{
  margin:0 0 16px;
  color:#ffffff;
  font-size:24px;
}

.pricing-price{
  display:flex;
  align-items:flex-end;
  gap:4px;
  margin-bottom:18px;
}

.pricing-currency{
  margin-bottom:9px;
  color:#22d3ee;
  font-size:20px;
  font-weight:700;
}

.pricing-price strong{
  font-size:52px;
  line-height:1;
}

.pricing-period{
  margin-bottom:7px;
  color:#8fa4bd;
  font-size:13px;
}

.pricing-desc{
  margin:0 0 22px;
  color:#9fb3cc;
  font-size:14px;
  line-height:1.6;
}

.pricing-features{
  margin:0 0 26px;
  padding:20px 0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.pricing-features li{
  position:relative;
  margin-bottom:12px;
  padding-left:24px;
  color:#c7d2e5;
  font-size:14px;
}

.pricing-features li:last-child{
  margin-bottom:0;
}

.pricing-features li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#22d3ee;
  font-weight:800;
}

.pricing-btn{
  display:block;
  padding:12px 18px;
  border-radius:10px;
  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6
  );
  color:#ffffff;
  font-size:14px;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.pricing-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(139,92,246,.28);
}

How This Pricing Card Works

This Pricing Card presents a subscription plan, monthly price, included features, and a call-to-action link inside a compact layout. The published component uses HTML and CSS only, so there is no JavaScript controlling the card or its interactions.

The main .pricing-card container uses width: 100% with max-width: 340px, which allows it to fit smaller parent containers while keeping a consistent maximum size. The card has 32px of internal padding, a dark #08111f background, and a 20px border radius. Its default border uses a semi-transparent purple tone, while box-shadow: 0 18px 45px rgba(0,0,0,.28) adds depth against the page background.

The hover effect is handled by the .pricing-card:hover selector. When the pointer moves over the card, transform: translateY(-7px) lifts the whole component upward. The border becomes the solid purple #8b5cf6, and the shadow expands with an additional purple glow. These changes use .3s ease transitions for the transform, shadow, and border color. For more detail about this type of interaction, see the MDN CSS transitions documentation.

At the top, .pricing-badge displays the POPULAR label. It uses display: inline-block, a soft purple background, and border-radius: 999px to create a pill-shaped badge. The small 11px text, bold weight, and 1px letter spacing make it visually distinct without taking much space.

The plan title is a standard <h2> containing Pro Plan. Below it, .pricing-price uses Flexbox with align-items: flex-end so the currency symbol, main price, and billing period line up along the lower part of the row.

The dollar symbol is styled separately through .pricing-currency with a cyan #22d3ee color and a 20px font size. The main price uses a much larger 52px font size with line-height: 1, making 29 the strongest visual element. The /month label is smaller and muted with #8fa4bd.

The description appears underneath at 14px with a 1.6 line height. It explains that the plan is intended for growing projects and professional websites while maintaining visual separation from the price.

The feature list removes the browser’s default list styling with list-style: none. It also adds subtle top and bottom borders with 20px of vertical padding. Each list item uses padding-left: 24px to leave room for a custom check mark.

Those check marks are created with the ::before pseudo-element rather than additional HTML. The CSS inserts ✓ through the content property and positions it at the left side of every feature. The cyan color helps each included feature stand out from the muted feature text.

The final .pricing-btn is an anchor styled as a full-width button. Its background uses a horizontal gradient from cyan to purple, with centered bold text and a 10px border radius. On hover, the button moves upward by 2px and gains a purple-tinted shadow. That interaction uses a faster .2s ease transition than the main card.

Customizing This Pricing Card

The existing structure provides several values that can be changed when adapting the card for another subscription plan or pricing page.

• Change max-width: 340px to make the pricing card wider or narrower.
• Replace POPULAR, Pro Plan, $29, and /month with your own plan and billing information.
• Update the description and the four feature items to reflect the actual plan benefits.
• Adjust the 32px padding or 20px border radius to change the overall spacing and shape.
• Replace the purple #8b5cf6 and cyan #22d3ee colors to match your brand.
• Change the 52px price size if you want the cost to appear more or less prominent.
• Increase or reduce translateY(-7px) to control the card hover movement.
• Modify the .3s card transition and .2s button transition to change the interaction speed.

Where to Use This Pricing Card

This component is suitable for layouts where a single plan needs clear pricing, benefits, and a visible action.

• SaaS pricing pages.
• Membership and subscription websites.
• Hosting or software plan comparisons.
• Premium feature upgrade sections.
• Agency service packages.
• Developer tool subscription pages.
• Landing pages promoting a featured plan.

Because the component has a fixed maximum width and no JavaScript dependency, multiple copies can also be arranged inside a Grid or Flexbox pricing table. For another card-based call-to-action layout, the Interactive CTA Card is a related CodeRipple component that can be used in other conversion-focused sections.

Frequently Asked Questions

Does the Pricing Card use JavaScript?

No. The published component contains HTML and CSS only. Its card lift, border change, shadow effect, and button hover movement are all controlled through CSS.

How are the check marks added to the feature list?

Each .pricing-features li uses a ::before pseudo-element. The CSS sets content: "✓" and positions the cyan check mark to the left of the feature text.

Does the Get Started button perform a real signup action?

Not in the published component. The button is an anchor with href="#", so it acts as a styled placeholder link until a real destination is added.

How does the card highlight the monthly price?

The price row separates the currency, main amount, and billing period into individual elements. The 29 value uses a large 52px font size, while the cyan currency symbol and smaller muted /month label establish a clear visual hierarchy.

This Pricing Card keeps the structure simple while combining plan details, feature highlights, and lightweight CSS hover interactions in a reusable subscription layout.