Minimal Pricing Table - Gradient Version

---

Description

Use this simple and beautiful solution to create a pricing table. This plugin uses css editor, markdown block, and works with all template families.

---

How To Install

Add a Markdown Block to the page you’d like your pricing table on.

Copy and paste the text below into the Markdown Block and enter your info accordingly.

Be sure to add a hyperlink link to the text you’ve entered in place of Button Link Text. This will become your call to action button. Save the page when done.

Plan Title Here
-----

**$99**/mo
==========
![Image](https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/5c80c769e4966be727b97f52/1551943529261/zigzag.png)

Plan Feature 1

Plan Feature 2

Plan Feature 3

Plan Feature 4

Button Link Text

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Gradient Minimal Pricing Table //

.sqs-block-markdown {
  max-width: 400px;
  background: -webkit-linear-gradient(to top, #F07C63, #E45372);
  background: linear-gradient(to top, #F07C63, #E45372);
  border: #FFFFFF 1px solid;
  border-radius: 10px;
  padding: 40px !important;
  margin: 20px;
  text-align: center;
}

// Pricing Table Plan Title //

.sqs-block-markdown h2 {
  color: #FFFFFF;
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 20px 30px 35px 30px;
}

// Pricing Table Plan Price //

.sqs-block-markdown h1 strong {
  font-size: 55px;
  line-height: 20px;
  font-weight: 200;
  color: #FFFFFF;
}

.sqs-block-markdown h1 {
  font-weight: 200;
  font-size: 22px;
  padding-left: 25px;
  padding-top: 0px;
  padding-bottom: 10px;
  margin: 0px;
  color: #FFFFFF;
}

// Pricing Table List //

.sqs-block-markdown  p {
  padding: 30px 30px 10px 30px;
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 20px;
  color: #FFFFFF;
}

// Pricing Table Button //

.sqs-block-markdown a {
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid white !important;
  padding: 10px 35px !important;
  background: none;
  color: #FFFFFF !important;
  border-radius:20px;
}

.sqs-block-markdown a:hover {
  color: #FFFFFF !important;
  background: #000000;
  border: 2px solid #000000 !important;
  -webkit-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -ms-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
}

// Mobile Pricing Table //

@media (max-width : 667px) { .sqs-block-markdown {
  h2 {
    font-size: 20px !important;
  }
  .sqs-block-markdown h1 {
    font-size: 18px !important;
  }
  strong {
    font-size: 40px !important;
  }
  }
}

---

Customize

There are quite a few values you can change, so we sectioned them so they are easier to find.

• Pricing Table Box: Adjust the gradient background, border top, border, border radius, max width, and text alignment to your liking.

• Zig Zag Line: You can swap out the line with your own graphic by replacing the image url.

• Title, Price, and List: You can change any of these values to target font size, color, spacing, and more.

• Button: Adjust the background, color, border radius, and padding to modify the call to action button.

• Button on Hover: Adjust the background, color, and border color to modify the call to action button when hovered over.

• To change the font families, go to Site Styles and edit the header 1, header 2, and body text settings.

---