This pricing section HTML CSS tutorial shows you how to build a dark three-column pricing card layout with a featured middle card. The middle card uses :nth-child(2) to apply a lime green background and dark text, while the other two cards stay dark with a subtle border.
Each card has a large display price, a custom SVG checkmark list, and a diagonal arrow link. The card grid collapses from three columns to two on tablet and one on mobile.
Final output:
Ways to work together
Clear scope.
Straight numbers.
Every engagement starts with a conversation. These are useful places to begin.
$8k
From
One urgent question. Two focused weeks. A clear way forward.
- Positioning workshop
- Messaging framework
- Creative direction
$22k
From
The full strategic and visual foundation for your next chapter.
- Brand strategy
- Visual identity
- Core launch kit
$38k
From
From core idea to a digital home that earns attention.
- Everything in Foundation
- Website design
- Launch campaign
Steps for Pricing Section HTML CSS:
1. First, link the DM Sans and Manrope fonts from Google Fonts in the head.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap" rel="stylesheet">Let’s start with a section element with the class pricing-section. Inside it, add a .section-container div with a .pricing-header and a .pricing-cards-wrapper div.
<section class="pricing-section">
<div class="section-container">
<div class="pricing-header"></div>
<div class="pricing-cards-wrapper"></div>
</div>
</section>Then reset margins, set DM Sans as the font family, and define Manrope as a CSS variable on :root. Give the section a near-black background with white text. Center .section-container with the margin inline property set to auto and a max-width.
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "DM Sans", sans-serif;
}
:root {
--heading-font: "Manrope", sans-serif;
}
.pricing-section {
padding: 6.875rem 3%;
background-color: hsl(0, 0%, 8%);
color: hsl(0, 0%, 100%);
}
.pricing-section .section-container {
max-width: 85.5rem;
margin-inline: auto;
}2. Fill in .pricing-header with a .pricing-header-left div containing the label and heading, and a .pricing-header-right div containing the description.
<div class="pricing-header">
<div class="pricing-header-left">
<p class="section-label">Ways to work together</p>
<h2>Clear scope.<br> Straight numbers.</h2>
</div>
<div class="pricing-header-right">
<p>Every engagement starts with a conversation. These are useful places to begin.</p>
</div>
</div>Use a two-column grid on .pricing-header with the left column taking up more space. Set the align items property to end so the description aligns to the bottom of the heading. On mobile, collapse to a single column.
.pricing-section .pricing-header {
display: grid;
grid-template-columns: 2.75fr 1fr;
align-items: end;
gap: 2rem;
padding-bottom: 3.75rem;
}
@media screen and (max-width: 768px) {
.pricing-section .pricing-header {
grid-template-columns: 1fr;
}
}
.pricing-section .section-label {
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.54px;
text-transform: uppercase;
color: hsla(0, 0%, 100%, 0.68);
}
.pricing-section .pricing-header-left h2 {
margin-top: 1.875rem;
font-family: var(--heading-font);
font-weight: 600;
font-size: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
line-height: 1;
letter-spacing: -0.025em;
color: hsl(38, 21%, 93%);
}
.pricing-section .pricing-header-right p {
font-size: .875rem;
line-height: 1.5;
color: hsla(0, 0%, 100%, 0.62);
max-width: 20rem;
}Output:
Ways to work together
Clear scope.
Straight numbers.
Every engagement starts with a conversation. These are useful places to begin.
3. Fill in .pricing-cards-wrapper with three .pricing-card divs. Each card has a .pricing-card-top with the plan name and a tag, a .pricing div with the price and label, a description paragraph, a feature list, and a link.
<div class="pricing-cards-wrapper">
<div class="pricing-card">
<div class="pricing-card-top">
<span>Sprint</span>
<span>Get Unstuck</span>
</div>
<div class="pricing">
<p>$8k</p>
<p>From</p>
</div>
<p class="pricing-card-description">One urgent question. Two focused weeks. A clear way forward.</p>
<ul>
<li>Positioning workshop</li>
<li>Messaging framework</li>
<li>Creative direction</li>
</ul>
<a href="#">Talk it through
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.667969 9.99935L10.0013 0.666016M10.0013 7.99935V0.666016H2.66797" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" />
</svg>
</a>
</div>
<!-- add more pricing cards -->
</div>Use a three-column grid on .pricing-cards-wrapper. On tablet, switch to two columns. On mobile, collapse to a single column. The second card gets a bright lime green background and dark text using :nth-child(2), since it’s the featured “most popular” plan. Also update the feature list border color and the list icon color on the second card to dark so they remain visible against the light background.
.pricing-section .pricing-cards-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .875rem;
}
@media screen and (max-width: 992px) {
.pricing-section .pricing-cards-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 600px) {
.pricing-section .pricing-cards-wrapper {
grid-template-columns: 1fr;
}
}
.pricing-section .pricing-card {
padding: 1.75rem;
border-radius: 1.75rem;
border: 1px solid hsla(0, 0%, 100%, 0.28);
}
.pricing-section .pricing-card:nth-child(2) {
background-color: hsl(79, 100%, 68%);
color: hsl(0, 0%, 8%);
border-color: hsl(79, 100%, 68%);
}
.pricing-section .pricing-card:nth-child(2) ul {
border-top: 1px solid hsl(0, 0%, 8%);
list-style-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.898438 4.90039L3.89844 7.90039L10.8984 0.900391' stroke='hsl(0, 0%, 8%)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
padding-left: 1.5rem;
}
.pricing-section .pricing-card:nth-child(2) .pricing-card-top span:last-child {
border-color: hsl(0, 0%, 8%);
}Output:
Ways to work together
Clear scope.
Straight numbers.
Every engagement starts with a conversation. These are useful places to begin.
$8k
From
One urgent question. Two focused weeks. A clear way forward.
- Positioning workshop
- Messaging framework
- Creative direction
$22k
From
The full strategic and visual foundation for your next chapter.
- Brand strategy
- Visual identity
- Core launch kit
$38k
From
From core idea to a digital home that earns attention.
- Everything in Foundation
- Website design
- Launch campaign
4. Style the .pricing-card-top. Use flexbox with the justify content property set to space-between to push the plan name and tag to opposite ends. Style the plan name with the Manrope font in a semi-bold weight. Style the tag as a pill-shaped span with a border and wide letter spacing.
.pricing-section .pricing-card-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.pricing-section .pricing-card-top span:first-child {
font-family: var(--heading-font);
font-weight: 600;
font-size: 1.375rem;
line-height: 1.5;
}
.pricing-section .pricing-card-top span:last-child {
font-weight: 700;
font-size: 0.625rem;
line-height: 1.3;
letter-spacing: 0.9px;
text-transform: uppercase;
border: 1px solid hsl(0, 0%, 100%);
padding: 0.375rem .625rem;
border-radius: 3rem;
}Output:
Ways to work together
Clear scope.
Straight numbers.
Every engagement starts with a conversation. These are useful places to begin.
$8k
From
One urgent question. Two focused weeks. A clear way forward.
- Positioning workshop
- Messaging framework
- Creative direction
$22k
From
The full strategic and visual foundation for your next chapter.
- Brand strategy
- Visual identity
- Core launch kit
$38k
From
From core idea to a digital home that earns attention.
- Everything in Foundation
- Website design
- Launch campaign
5. Style the .pricing div. Use the Manrope font at a large size using clamp() on the price number so it scales with the screen. Add a tight line height and a large negative letter spacing to make the display price feel impactful. Style the “From” label with a very small uppercase font below the price.
.pricing-section .pricing {
margin-top: 3.75rem;
}
.pricing-section .pricing p:first-child {
font-family: var(--heading-font);
font-weight: 600;
font-size: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
line-height: .85;
letter-spacing: -0.055em;
}
.pricing-section .pricing p:last-child {
margin-top: .5rem;
font-size: .625rem;
line-height: 1.5;
text-transform: uppercase;
}
.pricing-section .pricing-card-description {
margin-top: 1.25rem;
font-size: .875rem;
line-height: 1.5;
max-width: 18rem;
}Style the feature list. Use a custom SVG checkmark as the list style image so the tick matches the card’s design rather than using the default bullet. Add a top border and some top padding to visually separate the features from the description above. Style the link with flexbox and the align items property set to center so the diagonal arrow SVG stays on the same line as the text.
.pricing-section ul {
padding: 0;
margin: 0;
margin-top: 3.375rem;
padding-top: 1.125rem;
border-top: 1px solid hsl(0, 0%, 100%);
list-style-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.898438 4.90039L3.89844 7.90039L10.8984 0.900391' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
padding-left: 1.5rem;
}
.pricing-section ul li {
font-size: .75rem;
line-height: 1.5;
margin-bottom: 0.625rem;
}
.pricing-section .pricing-card a {
display: flex;
align-items: center;
gap: .5rem;
margin-top: 1.5rem;
font-weight: 700;
font-size: .75rem;
line-height: 1.5;
color: inherit;
text-decoration: none;
}Output:
Ways to work together
Clear scope.
Straight numbers.
Every engagement starts with a conversation. These are useful places to begin.
$8k
From
One urgent question. Two focused weeks. A clear way forward.
- Positioning workshop
- Messaging framework
- Creative direction
$22k
From
The full strategic and visual foundation for your next chapter.
- Brand strategy
- Visual identity
- Core launch kit
$38k
From
From core idea to a digital home that earns attention.
- Everything in Foundation
- Website design
- Launch campaign
Final Output Code for Pricing Section HTML CSS:
Head
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap" rel="stylesheet">HTML
<section class="pricing-section">
<div class="section-container">
<div class="pricing-header">
<div class="pricing-header-left">
<p class="section-label">Ways to work together</p>
<h2>Clear scope.<br>
Straight numbers.
</h2>
</div>
<div class="pricing-header-right">
<p>Every engagement starts with a conversation.
These are useful places to begin.</p>
</div>
</div>
<div class="pricing-cards-wrapper">
<div class="pricing-card">
<div class="pricing-card-top">
<span>Sprint</span>
<span>Get Unstuck</span>
</div>
<div class="pricing">
<p>$8k</p>
<p>From</p>
</div>
<p class="pricing-card-description">One urgent question. Two focused weeks. A
clear way forward.</p>
<ul>
<li>Positioning workshop</li>
<li>Messaging framework</li>
<li>Creative direction</li>
</ul>
<a href="#">Talk it through <svg width="11" height="11" viewBox="0 0 11 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0.667969 9.99935L10.0013 0.666016M10.0013 7.99935V0.666016H2.66797"
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" />
</svg>
</a>
</div>
<div class="pricing-card">
<div class="pricing-card-top">
<span>Foundation</span>
<span>Most popular</span>
</div>
<div class="pricing">
<p>$22k</p>
<p>From</p>
</div>
<p class="pricing-card-description">The full strategic and visual foundation for
your next chapter.</p>
<ul>
<li>Brand strategy</li>
<li>Visual identity</li>
<li>Core launch kit</li>
</ul>
<a href="#">Talk it through <svg width="11" height="11" viewBox="0 0 11 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0.667969 9.99935L10.0013 0.666016M10.0013 7.99935V0.666016H2.66797"
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" />
</svg>
</a>
</div>
<div class="pricing-card">
<div class="pricing-card-top">
<span>Launch</span>
<span>Go All In</span>
</div>
<div class="pricing">
<p>$38k</p>
<p>From</p>
</div>
<p class="pricing-card-description">From core idea to a digital home that earns
attention.</p>
<ul>
<li>Everything in Foundation</li>
<li>Website design</li>
<li>Launch campaign</li>
</ul>
<a href="#">Talk it through <svg width="11" height="11" viewBox="0 0 11 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0.667969 9.99935L10.0013 0.666016M10.0013 7.99935V0.666016H2.66797"
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" />
</svg>
</a>
</div>
</div>
</div>
</section>CSS
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "DM Sans", sans-serif;
}
:root {
--heading-font: "Manrope", sans-serif;
}
.pricing-section {
padding: 6.875rem 3%;
background-color: hsl(0, 0%, 8%);
color: hsl(0, 0%, 100%);
}
.pricing-section .section-container {
max-width: 85.5rem;
margin-inline: auto;
}
.pricing-section .pricing-header {
display: grid;
grid-template-columns: 2.75fr 1fr;
align-items: end;
gap: 2rem;
padding-bottom: 3.75rem;
}
@media screen and (max-width: 768px) {
.pricing-section .pricing-header {
grid-template-columns: 1fr;
}
}
.pricing-section .section-label {
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.54px;
text-transform: uppercase;
color: hsla(0, 0%, 100%, 0.68);
}
.pricing-section .pricing-header-left h2 {
margin-top: 1.875rem;
font-family: var(--heading-font);
font-weight: 600;
font-size: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
line-height: 1;
letter-spacing: -0.025em;
color: hsl(38, 21%, 93%);
}
.pricing-section .pricing-header-right p {
font-size: .875rem;
line-height: 1.5;
color: hsla(0, 0%, 100%, 0.62);
max-width: 20rem;
}
.pricing-section .pricing-cards-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .875rem;
}
@media screen and (max-width: 992px) {
.pricing-section .pricing-cards-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 600px) {
.pricing-section .pricing-cards-wrapper {
grid-template-columns: 1fr;
}
}
.pricing-section .pricing-card {
padding: 1.75rem;
border-radius: 1.75rem;
border: 1px solid hsla(0, 0%, 100%, 0.28);
}
.pricing-section .pricing-card:nth-child(2) {
background-color: hsl(79, 100%, 68%);
color: hsl(0, 0%, 8%);
border-color: hsl(79, 100%, 68%);
}
.pricing-section .pricing-card:nth-child(2) ul {
border-top: 1px solid hsl(0, 0%, 8%);
list-style-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.898438 4.90039L3.89844 7.90039L10.8984 0.900391' stroke='hsl(0, 0%, 8%)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
padding-left: 1.5rem;
}
.pricing-section .pricing-card:nth-child(2) .pricing-card-top span:last-child {
border-color: hsl(0, 0%, 8%);
}
.pricing-section .pricing-card-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.pricing-section .pricing-card-top span:first-child {
font-family: var(--heading-font);
font-weight: 600;
font-size: 1.375rem;
line-height: 1.5;
}
.pricing-section .pricing-card-top span:last-child {
font-weight: 700;
font-size: 0.625rem;
line-height: 1.3;
letter-spacing: 0.9px;
text-transform: uppercase;
border: 1px solid hsl(0, 0%, 100%);
padding: 0.375rem .625rem;
border-radius: 3rem;
}
.pricing-section .pricing {
margin-top: 3.75rem;
}
.pricing-section .pricing p:first-child {
font-family: var(--heading-font);
font-weight: 600;
font-size: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
line-height: .85;
letter-spacing: -0.055em;
}
.pricing-section .pricing p:last-child {
margin-top: .5rem;
font-size: .625rem;
line-height: 1.5;
text-transform: uppercase;
}
.pricing-section .pricing-card-description {
margin-top: 1.25rem;
font-size: .875rem;
line-height: 1.5;
max-width: 18rem;
}
.pricing-section ul {
padding: 0;
margin: 0;
margin-top: 3.375rem;
padding-top: 1.125rem;
border-top: 1px solid hsl(0, 0%, 100%);
list-style-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.898438 4.90039L3.89844 7.90039L10.8984 0.900391' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
padding-left: 1.5rem;
}
.pricing-section ul li {
font-size: .75rem;
line-height: 1.5;
margin-bottom: 0.625rem;
}
.pricing-section .pricing-card a {
display: flex;
align-items: center;
gap: .5rem;
margin-top: 1.5rem;
font-weight: 700;
font-size: .75rem;
line-height: 1.5;
color: inherit;
text-decoration: none;
}If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
