← All elements
<div class="pt"><h3>Pro</h3><p class="pr"><b>$12</b>/month</p><ul><li>Unlimited projects</li><li>Priority support</li><li>Team sharing</li></ul><button>Choose plan</button></div>About this card
A pricing plan with a gradient header, feature ticks drawn in CSS and a raised call-to-action.
How it works
A coloured top border, big price with a small unit and a list whose ticks are drawn from a rotated pair of borders make up the card. The button lifts on hover. Every part is plain text and CSS shapes.
Ways to customise it
- Change the plan name and price.
- Add or remove list items.
- Use another accent instead of #6366f1.
Good to know
Spell out what is included in text, not just with ticks, so the information is available to everyone. Make the button a real link or button in your page.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.