Designing a Stylish Pricing Table in Jekyll for Service Websites

Creating an attractive and functional pricing table is essential for service websites. It helps visitors compare options quickly and encourages conversions. In Jekyll, you can design a stylish pricing table using simple HTML and CSS, integrated into your site's layout.

Why Use a Pricing Table?

Pricing tables provide a clear overview of your service packages. They highlight differences in features and prices, making it easier for customers to choose the best plan. A well-designed table also enhances your website's professionalism and trustworthiness.

Steps to Create a Stylish Pricing Table

1. Structure Your HTML

Start with a container <div> that holds your entire pricing table. Inside, create individual <div> elements for each pricing plan. Each plan should include a title, price, features list, and a call-to-action button.

2. Style with CSS

Use CSS to add colors, borders, shadows, and hover effects. Flexbox or CSS Grid can help align your plans horizontally or vertically. Consistent spacing and font choices improve readability.

Example HTML Structure

Here's a simple example of the HTML structure for your pricing table:

<div class="pricing-table">
  <div class="pricing-plan">
    <h3>Basic</h3>
    <p class="price">$19/mo</p>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
    <a href="#" class="btn">Choose Plan</a>
  </div>
  <div class="pricing-plan">
    <h3>Pro</h3>
    <p class="price">$49/mo</p>
    <ul>
      <li>Feature A</li>
      <li>Feature B</li>
      <li>Feature C</li>
    </ul>
    <a href="#" class="btn">Choose Plan</a>
  </div>
  <div class="pricing-plan">
    <h3>Enterprise</h3>
    <p class="price">$99/mo</p>
    <ul>
      <li>Feature X</li>
      <li>Feature Y</li>
      <li>Feature Z</li>
    </ul>
    <a href="#" class="btn">Choose Plan</a>
  </div>
</div>

Adding Custom CSS

Customize your pricing table with CSS. For example, add background colors, borders, and hover effects to make it more appealing. Here's a basic CSS snippet to get you started:

.pricing-table {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 40px 0;
}
.pricing-plan {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  width: 250px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.pricing-plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.price {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0073e6;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 15px;
}
.btn:hover {
  background-color: #005bb5;
}

By combining HTML structure with CSS styling, you can create a professional and visually appealing pricing table tailored to your service website. Adjust colors, fonts, and layout to match your branding for the best results.