Minimal Info Box

minimalbox.png

Step One

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

Step Two

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.

Title
---------------

Sentences and text info here.

Button Link Text

Step Three

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Four

Copy and paste the code below into the Custom CSS Editor box.

// Info Box //

.sqs-block-markdown {
  max-width: 600px;
  background: #ffffff;
  border: #DDDDDD 1px solid;
  border-radius: 0px;
  padding: 30px !important;
  margin: 20px;
  text-align: left;
}

// Info Box Title //

.sqs-block-markdown h2 {
  color: #000000;
  font-size: 26px;
  letter-spacing: 0px;
  padding: 20px 30px 0px 30px;
}

// Info Box Text Info //

.sqs-block-markdown  p {
  padding: 10px 30px 30px 30px;
  margin: 0;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 1px;
  line-height: 28px;
  color: #181818;
}

// Info Box Button //

.sqs-block-markdown a {
  font-weight: 200;
  font-size: 15px;
  text-transform: none;
  display: inline-block;
  border: 1px solid black !important;
  padding: 15px 30px !important;
  background-color: white;
  color: black !important;
  border-radius: 0px;
}
.sqs-block-markdown a:hover {
  background-color: black !important;
  color: white !important;
}

Step Five

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

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

  • Title, and Text Info: 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.

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

Save and refresh the page. 👍

Moov Labs