Pricing Plan Table: Rounded Design

What does this code do?

This technique will allow you to add a pricing plan table with the option for an outline, growing animation on hover, and shadow. This design is completed using a code block to create a rounded edge design.

WARNING: This design uses only custom code and may be more difficult than other copy and paste snippets available in the Encyclopedia. If you would like an easier option, check out the Pricing Plan Table: Box Design.

RESPONSIVE: This pricing table is responsive. Columns will automatically wrap as the screen gets smaller.

Code Snippets

HTML

Copy and paste the following code into a Code Block on your Squarespace Website.

<div class="pricing-section">
  <!-- COLUMNS BELOW THIS LINE -->


  <!-- COLUMNS ABOVE THIS LINE -->
</div>

Then copy and paste the following between the <!—COLUMNS BELOW/ABOVE THIS LINE —>. Paste it over and over until you have the number of columns you would like. For example, if I have 3 Pricing Packages I would paste the following code three times inside of the above code.

<!-- COLUMN ONE -->
<div class="pricing-table">
  <div class="pricing-title">
    <h3>
      THIS IS THE TITLE
    </h3>
  </div>
  <div class="pricing-details">
    <div class="pricing-details-text">
      <h4>
        $30/Month
      </h4>
      <p>This is a cool feature.</p>
      <p>This is a cool feature.</p>
      <p>This is a cool feature.</p>
    </div>
    <div class="sws-block-content">
      <div class="sqs-block-button-container--left" data-animation-role="button" data-alignment="left" data-button-size="medium">
        <a href="LINK FOR BUTTON HERE" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">BUY NOW</a>
      </div>
    </div>
  </div>
</div>

Then edit the title, price, details, button link, and button text.

CSS

Copy and paste this code into Design > Custom CSS

/* Pricing Table */
.pricing-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.pricing-table {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  -webkit-box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78);
  /*shadow*/
  -moz-box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78);
  /*shadow*/
  box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78);
  /*shadow*/
  border: 2px solid hsl(359, 1%, 43%);
  /*outline*/
  border-radius: 25px;
  /* rounded edge */
  margin: 10px !important;
  /* spacing between columns */
  -webkit-transition: transform ease 0.8s;
  /*growing animation*/
  transition: transform ease 0.8s;
  /*growing animation*/
}

.pricing-table:hover {
  -webkit-transform: scale(1.03) !important;
  /*growing animation*/
  transform: scale(1.03) !important;
  /*growing animation*/
}

.pricing-title {
  background: grey;
  /* background color of title */
  border-radius: 20px 20px 0 0;
  /*rounded edge; should be slightly smaller than rounded edge code above */
  border: 2px solid grey;
  /* border colour */
}

.pricing-title h3 {
  font-size: 1.3rem;
  /* title font size */
  color: white;
  /* title color */
  text-align: center;
  /* center the title */
  padding: 10px 0 !important;
  /* spacing above and below title */
}

.pricing-details {
  margin: 10px;
  /* spacing around pricing details */
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.pricing-details h4 {
  margin-top: 30px !important;
  /* spacing between title and price */
  text-align: center;
  /* price centered */
  font-size: 1.5rem;
  /* price font size */
}

.pricing-details p {
  text-align: center;
  /*pricing table details centered */
}

.pricing-table .sqs-block-button-container--left {
  text-align: center;
  /* button is centered */
  margin: 20px 10px !important;
  /* spacing around button */
}

If you do not want the border, shadow, and/or hover animation just delete that part of the code.

If you would like a different shadow, go to Box Shadow CSS Generator by CSmatic and create the shadow you would like to appear. Then replace the shadow code above with the code from the generator.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the text, button link, spacing, colours, outline, shadow, and/or growing animation.