Pricing Card

Enhance your website's pricing presentation with pricing cards created using HTML and CSS. Learn how to showcase your pricing plans in an informative manner to attract and engage customers.

Adding a pricing card to your website can effectively display your product or service pricing details. This guide will walk you through creating a pricing card using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and customize the pricing card to fit your specific requirements.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the pricing card. Select the code, copy it, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

  • Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:
    • <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

  • Personalize the pricing card to match your website's branding and functionality. Adjust the CSS styles to modify the pricing card's appearance, colors, and content. Experiment with different fonts, sizes, and layouts to create a pricing card that seamlessly integrates with your website's design.

By following these steps, you can implement and customize a pricing card on your website using HTML and CSS. Tailor the pricing card to your specific needs and effectively display your product or service pricing details attractively and clearly.

Code Explanation

HTML Code

Wrapper Divs
<div class="background"></div>
<div class="grid">
  • .background: A div that might be used for background styling.
  • .grid: A container div that holds the three pricing cards.
Card Structure

Each card is structured similarly, with differences in content:

<article class="card">
  <h2>Free</h2>
  <var><abbr>$</abbr>0<small>/MO</small></var>
  <ul>
    <li>
      <svg width="100" height="100">
        <use xlink:href="#myPath" />
      </svg>
      <p>10 user requests</p>
    </li>
    <!-- More list items -->
  </ul>
  <button>Choose Plan</button>
</article>
  • <article class="card">: Each pricing plan is contained within an <article> element with the class card.
  • <h2>: The title of the plan.
  • <var>: The price of the plan, with an abbreviation for the dollar symbol and a small text for the /MO.
  • <ul>: A list of features for the plan, each in a <li> with an SVG icon and a <p> description.
  • <button>: A button to choose the plan.
SVG Icons
<svg width="100" height="100">
  <use xlink:href="#myPath" />
</svg>
  • Uses an SVG symbol defined later in the document to display an icon.
SVG Symbol Definition
<svg style="display: none;">
  <symbol viewBox="0 0 492 351" fill="none" id="myPath">
    <g clip-path="url(#clip0_84_341)">
      <path d="M34 175.365L175.42 316.785L458.233 33.9417" stroke="#F7F7F7" stroke-width="66.6667" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <defs>
      <clipPath id="clip0_84_341">
        <rect width="492" height="350" fill="white" transform="translate(0 0.364502)"/>
      </clipPath>
    </defs>
  </symbol>
</svg>
  • <symbol>: Defines an SVG symbol with the id myPath that can be reused in the document. This particular symbol is a checkmark.
  • <use xlink:href="#myPath" />: Refers to this symbol to include it in multiple places within the document.

CSS Code

General Styles
* {
  box-sizing: border-box;
}
  • * Selector: Sets the box-sizing property to border-box for all elements, ensuring that padding and border are included in the element's total width and height.
Body Styles
body {
  display: grid;
  place-items: center;
  padding: 60px 15%;
  margin: 0;
  color: #f7f7f7;
  background: #121212;
  font-family: "Poppins";
}
  • display: grid; place-items: center;: Centers the body content both horizontally and vertically.
  • padding: 60px 15%;: Adds padding around the body content.
  • margin: 0;: Removes default margin.
  • color: #f7f7f7;: Sets the text color to light grey.
  • background: #121212;: Sets the background color to dark grey.
  • font-family: "Poppins";: Sets the font to "Poppins".
Background Style
.background {
  position: fixed;
  z-index: -1;
  top: -33vh;
  left: -100px;
  right: -100px;
  height: 60vmax;
  rotate: -4deg;
  background: #4f97ff;
}
  • position: fixed;: Fixes the element in place relative to the viewport.
  • z-index: -1;: Places the element behind other content.
  • top, left, right: Positions the element.
  • height: 60vmax;: Sets the height relative to the viewport size.
  • rotate: -4deg;: Rotates the element slightly.
  • background: #4f97ff;: Sets the background color to blue.
Card Styles
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 50px 50px 70px;
  background: #1e1e1e;
  font-size: 125%;
}
  • display: flex; flex-direction: column;: Uses flexbox to align items in a column.
  • justify-content: center; align-items: center;: Centers items within the card.
  • gap: 10px;: Adds spacing between items.
  • border-radius: 12px;: Rounds the corners of the card.
  • padding: 50px 50px 70px;: Adds padding inside the card.
  • background: #1e1e1e;: Sets a dark background color.
  • font-size: 125%;: Increases the font size.
Primary Card Style
.primary {
  order: -1;
}
.primary .card var {
  font-size: 60px;
}
  • .primary { order: -1; }: Places the primary card first.
  • .primary .card var { font-size: 60px; }: Increases the font size for the <var> element within the primary card.
Grid Styles
.grid {
  display: grid;
  place-items: center;
  gap: 20px;
  width: 100%;
}
.grid > div {
  width: 100%;
}
  • display: grid; place-items: center;: Uses a grid layout and centers items.
  • gap: 20px;: Adds spacing between grid items.
  • width: 100%;: Sets the width to full.
  • .grid > div { width: 100%; }: Ensures direct child divs of the grid have full width.
Media Queries
@media (width >= 768px) {
  body {
    height: 100vh;
    padding: 60px 20px;
  }
  .grid {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(2, 1fr);
  }
  .grid > div {
    height: 100%;
  }
  .primary {
    order: -1;
    grid-column: 1 / 3;
  }
  .primary .card {
    max-width: 45vw;
    margin: 0 auto;
  }
  .background {
    top: -25vh;
  }
}
@media (width >= 980px) {
  .grid {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
  }
  .grid > div {
    height: auto;
  }
  .primary {
    order: 0;
    grid-column: auto;
  }
  .background {
    top: -100px;
  }
}
  • Media Queries: Adjust the layout and styles based on screen width.
  • For widths >= 768px:
  • Adjusts body height and padding.
  • Defines a two-column grid layout.
  • Adjusts the primary card's position and size.
  • Changes background position.
  • For widths >= 980px:
  • Defines a three-column grid layout.
  • Adjusts the primary card’s order and grid column.
  • Changes background position.
Typography and List Styles
p,
h2 {
  margin: 0;
}
.card var {
  color: #4087ed;
  font-weight: 400;
  font-size: 50px;
  font-style: normal;
  margin-bottom: 10px;
}
.card var small {
  font-size: 16px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
ul li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
ul li svg {
  width: 16px;
  height: auto;
}
  • Typography:
    • p, h2 { margin: 0; }: Removes margins from paragraphs and headings.
    • .card var { ... }: Styles the <var> element within cards.
    • .card var small { font-size: 16px; }: Styles the <small> element within the <var>.
  • Lists:
    • ul { ... }: Removes default list styling and margin, adds padding.
    • ul li { ... }: Styles list items with flexbox, gap, alignment, and padding.
    • ul li svg { ... }: Styles SVG icons within list items.
Button Styles
.card button {
  display: grid;
  place-items: center;
  min-width: 200px;
  padding: 14px 0;
  border-radius: 6px;
  border: 2px solid #4087ed;
  background: transparent;
  color: #4087ed;
  font-size: inherit;
  font-family: inherit;
}
.card button.btn-primary {
  background: #4087ed;
  color: #f7f7f7;
}
  • .card button { ... }: Styles buttons within cards.
  • display: grid; place-items: center;: Centers button text.
  • min-width: 200px;: Sets a minimum width.
  • padding: 14px 0;: Adds padding inside the button.
  • border-radius: 6px;: Rounds button corners.
  • border: 2px solid #4087ed;: Sets a border color.
  • background: transparent; color: #4087ed;: Transparent background and colored text.
  • font-size: inherit; font-family: inherit;: Inherits font size and family.
  • .card button.btn-primary { ... }: Styles primary buttons.
  • background: #4087ed; color: #f7f7f7;: Sets background and text color.