Plan card

This is a plan card design template.

Basic

Setting the number of columns of the plan card by the window width (media query).

You can set the number of columns by the data attribute as follows.

data-max-cols-min-width-600="1": When the width >= 600px, the number of columns is 1
data-max-cols-min-width-896="2": When the width >= 896px, the number of columns is 2
data-max-cols-min-width-1200="2": When the width >= 1200px, the number of columns is 2
data-max-cols-min-width-1200="3": When the width >= 1200px, the number of columns is 3

Basic

$ 9 /mo

The description of the basic plan is...

Feature 1
Feature 2
Feature 3
Feature 4
Feature 5

Pro

$ 99 /mo

The description of the pro plan is...

Feature 1
Feature 2
Feature 3
Feature 4
Feature 5

HTML

<div class="plan-card" data-max-cols-min-width-896="2">
  <div class="item">
    <picture class="img-box">
      <source srcset="/img/project/noknow_web_design/beach_1.webp" type="image/webp">
      <img class="img" src="/img/project/noknow_web_design/beach_1.png" alt="" loading="lazy">
    </picture>
    <div class="content-box">
      <p class="title">Basic</p>
      <p class="price-box">
        <span class="currency">$</span>
        <span class="amount">9</span>
        <span class="per">/mo</span>
      </p>
      <p class="description">The description of the basic plan is...</p>
      <ul class="list">
        <li class="item check">Feature 1</li>
        <li class="item check">Feature 2</li>
        <li class="item check">Feature 3</li>
        <li class="item uncheck">Feature 4</li>
        <li class="item uncheck">Feature 5</li>
      </ul>
      <button class="submit fill" type="button">GET STARTED</button>
    </div>
  </div>
  <div class="item">
    <picture class="img-box">
      <source srcset="/img/project/noknow_web_design/beach_2.webp" type="image/webp">
      <img class="img" src="/img/project/noknow_web_design/beach_2.png" alt="" loading="lazy">
    </picture>
    <div class="content-box">
      <p class="title">Pro</p>
      <p class="price-box">
        <span class="currency">$</span>
        <span class="amount">99</span>
        <span class="per">/mo</span>
      </p>
      <p class="description">The description of the pro plan is...</p>
      <ul class="list">
        <li class="item check">Feature 1</li>
        <li class="item check">Feature 2</li>
        <li class="item check">Feature 3</li>
        <li class="item check">Feature 4</li>
        <li class="item check">Feature 5</li>
      </ul>
      <button class="submit fill" type="button">GET STARTED</button>
    </div>
  </div>
</div>

Install

npm

Console

> npm i @noknow/web-design-plan-card

Import

CSS

@import '/YOUR_PROJECT/node_modules/@noknow/web-design-plan-card/style.css';