Pricing Cards Layout

A responsive pricing table layout using flexbox. Features highlighted cards, feature lists, and call-to-action buttons. Perfect for SaaS products and subscription-based services.

PREVIEW

Basic

$9/month

Perfect for starters

5 Projects

10GB Storage

Basic Support

Popular

Pro

$29/month

For growing teams

Unlimited Projects

100GB Storage

Priority Support

Advanced Features

Enterprise

$99/month

For large organizations

Custom Solutions

Unlimited Storage

24/7 Support

Custom Integration

CODE

/* Pricing Container */
    .pricing-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    @media (min-width: 768px) {
      .pricing-container {
        flex-direction: row;
        align-items: stretch;
      }
    }

    /* Pricing Card */
    .pricing-card {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* Featured Card */
    .pricing-card.featured {
      transform: scale(1.05);
    }

    /* Features List */
    .features-list {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    /* Feature Item */
    .feature-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }