This services section HTML CSS tutorial shows you how to build a three-column services layout with a bold display heading, colored circular icons, pill-shaped tags, and a bottom CTA row.
The header uses a three-column grid so the label, heading, and description sit side by side on desktop.
The card grid uses border dividers between columns and pushes the card body to the bottom of each card using margin-top: auto, so all cards stay visually balanced regardless of content length.
Final output:
Built to make
a difference.
We turn ambitious ideas into brands and digital experiences people choose to remember.
Brand
systems
Distinct identities built to stay coherent, from the first impression to the thousandth.
Digital
products
Useful, intuitive products shaped around real behavior, not feature lists or fleeting trends.
Web
experiences
Fast, expressive websites that give your story structure and move people to act.
Have something else in mind? We shape our team around the problem.
Start a conversationSteps for Services Section HTML CSS:
1. First, link the Inter font 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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet">Let’s start with a section element with the class services-section. Inside it, add a .services-container div with a .services-header, .services-cards-wrapper, and .services-bottom div.
<section class="services-section">
<div class="services-container">
<div class="services-header"></div>
<div class="services-cards-wrapper"></div>
<div class="services-bottom"></div>
</div>
</section>Then reset margins, set Inter as the font family, and give the section a warm off-white background. Use clamp() on the padding so it scales with the screen. Center .services-container with the margin inline property set to auto and a max-width.
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
}
.services-section {
padding: clamp(3.5rem, calc(1rem + 6.67vw), 7rem) clamp(1.5rem, calc(1rem + 2.22vw), 3rem);
background-color: hsl(44, 33%, 94%);
color: hsl(60, 7%, 8%);
}
.services-section .services-container {
max-width: 90rem;
margin-inline: auto;
}2. Fill in .services-header with the section label, heading, and description paragraph.
<div class="services-header">
<span class="section-label">Services / 03</span>
<h2 class="services-title">Built to make<br> a difference<span>.</span></h2>
<p>We turn ambitious ideas into brands and digital experiences people choose to remember.</p>
</div>Add a top border to visually anchor the header at the top. On desktop, use a three-column grid with align-items set to end so the label and description align to the bottom of the heading. On mobile, the grid collapses to a single column so everything stacks naturally.
.services-section .services-header {
display: grid;
align-items: end;
gap: 2rem;
padding-top: 1.25rem;
border-top: 1px solid hsla(0, 0%, 0%, 0.25);
}
@media (min-width: 993px) {
.services-section .services-header {
grid-template-columns: 2fr 7fr 3fr;
}
}Output:
Built to make
a difference.
We turn ambitious ideas into brands and digital experiences people choose to remember.
3. Style the section label with a small uppercase font and wide letter spacing so it reads as a category tag. Style the heading with a heavy font weight and use clamp() so it scales smoothly. Set the line height property to 0.9 and a large negative letter spacing to make it feel tight and impactful. The period at the end gets an orange accent color using a span. Style the description with a smaller muted font on the right side.
.services-section .section-label {
font-weight: 500;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.98px;
text-transform: uppercase;
}
.services-section .services-title {
font-weight: 600;
font-size: clamp(3.5rem, calc(1rem + 6.11vw), 5.625rem);
line-height: .9;
letter-spacing: -0.07em;
max-width: 31.25rem;
}
.services-section .services-title span {
color: hsl(12, 100%, 60%);
}
.services-section .services-header p {
font-size: .875rem;
line-height: 1.7;
color: hsla(0, 0%, 0%, 0.65);
}Output:
Built to make
a difference.
We turn ambitious ideas into brands and digital experiences people choose to remember.
4. Fill in .services-cards-wrapper with three .services-card divs. Each card has a .services-card-header with a number and a colored icon, and a .services-card-body with the title, description, and tags.
<div class="services-cards-wrapper">
<div class="services-card">
<div class="services-card-header">
<span>01</span>
<div class="services-card-icon">
<svg width="100%" height="100%" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" rx="36" fill="#FF5C35" />
<path
d="M36 51.75C44.6985 51.75 51.75 44.6985 51.75 36C51.75 27.3015 44.6985 20.25 36 20.25C27.3015 20.25 20.25 27.3015 20.25 36C20.25 44.6985 27.3015 51.75 36 51.75Z"
stroke="#171714" stroke-width="1.5" />
<path
d="M36 41.25C38.8995 41.25 41.25 38.8995 41.25 36C41.25 33.1005 38.8995 30.75 36 30.75C33.1005 30.75 30.75 33.1005 30.75 36C30.75 38.8995 33.1005 41.25 36 41.25Z"
fill="#171714" />
<path d="M36 15V25.5V15ZM36 46.5V57V46.5ZM15 36H25.5H15ZM46.5 36H57H46.5Z" fill="black" />
<path d="M36 15V25.5M36 46.5V57M15 36H25.5M46.5 36H57" stroke="#171714" stroke-width="1.5" />
</svg>
</div>
</div>
<div class="services-card-body">
<h3>Brand <br>
systems</h3>
<p>Distinct identities built to stay coherent, from the first
impression to the thousandth.</p>
<div class="services-card-tags-wrapper">
<span class="services-card-tag">Strategy</span>
<span class="services-card-tag">Identity</span>
<span class="services-card-tag">Guidelines</span>
</div>
</div>
</div>
<!-- add more cards -->
</div>Add top and bottom borders on .services-cards-wrapper using the border block property to frame the card grid. On desktop, use a three-column grid. On mobile, collapse to a single column.
Give each card a minimum height and use flexbox with the flex direction property set to column so the card body always pushes to the bottom using margin-top: auto. Add a right border on each card except the last on desktop, and a bottom border on mobile instead.
.services-section .services-cards-wrapper {
margin-top: 5rem;
border-block: 1px solid hsla(0, 0%, 0%, 0.25);
display: grid;
}
@media (min-width: 993px) {
.services-section .services-cards-wrapper {
grid-template-columns: 1fr 1.07fr 1fr;
}
}
.services-section .services-card {
padding: 2rem 1.75rem;
min-height: 35rem;
display: flex;
flex-direction: column;
height: 100%;
}
.services-section .services-card:first-child {
padding-left: 0;
}
.services-section .services-card:last-child {
padding-right: 0;
}
@media (min-width: 993px) {
.services-section .services-card:not(:last-child) {
border-right: 1px solid hsla(0, 0%, 0%, 0.25);
}
}
@media (max-width: 992px) {
.services-section .services-card {
padding-inline: 0;
}
.services-section .services-card:not(:last-child) {
border-bottom: 1px solid hsla(0, 0%, 0%, 0.25);
}
}Output:
Built to make
a difference.
We turn ambitious ideas into brands and digital experiences people choose to remember.
Brand
systems
Distinct identities built to stay coherent, from the first impression to the thousandth.
Digital
products
Useful, intuitive products shaped around real behavior, not feature lists or fleeting trends.
Web
experiences
Fast, expressive websites that give your story structure and move people to act.
5. Style the .services-card-header. Use flexbox with the justify content property set to space-between to push the number and icon to opposite ends. Style the number with a small muted font. Use clamp() on the icon size so it scales with the screen.
.services-section .services-card-header {
display: flex;
justify-content: space-between;
gap: 2rem;
}
.services-section .services-card-header span {
font-size: .75rem;
line-height: 1.3;
color: hsla(0, 0%, 0%, 0.55);
}
.services-section .services-card-header svg {
width: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
height: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
}Style .services-card-body. Set the margin top property to auto so it always pushes to the bottom of the card regardless of how much space is above it. Style the title with a heavy font weight and use clamp() on the font size. And style the description with a muted color and a right margin so it doesn’t stretch too close to the card edge. Style the tags as pill-shaped spans using a large border radius and a thin border, with uppercase text and wide letter spacing.
.services-section .services-card-body {
margin-top: auto;
}
.services-section .services-card-body h3 {
font-weight: 600;
font-size: clamp(2.5rem, calc(1rem + 2.64vw), 3.375rem);
line-height: .93;
letter-spacing: -2.27px;
margin-bottom: 1.25rem;
}
.services-section .services-card-body p {
font-size: .875rem;
line-height: 1.7;
color: hsla(0, 0%, 0%, 0.65);
margin-right: 1.625rem;
}
.services-section .services-card-tags-wrapper {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.services-section .services-card-tag {
font-weight: 500;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 0.99px;
text-transform: uppercase;
padding: 0.375rem .75rem;
border-radius: 10rem;
border: 1px solid hsla(0, 0%, 0%, 0.25);
}Output:
Built to make
a difference.
We turn ambitious ideas into brands and digital experiences people choose to remember.
Brand
systems
Distinct identities built to stay coherent, from the first impression to the thousandth.
Digital
products
Useful, intuitive products shaped around real behavior, not feature lists or fleeting trends.
Web
experiences
Fast, expressive websites that give your story structure and move people to act.
6. Fill in .services-bottom with a short note and a “Start a conversation” link. Use flexbox with the justify content property set to space-between to push them to opposite ends. Style the link with a bottom border and an arrow SVG that slides slightly to the right on hover using a translate transform.
<div class="services-bottom">
<p>Have something else in mind? We shape our team around the problem.</p>
<a href="#">Start a conversation
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16602 10H14.9993M10.8327 5L15.8327 10L10.8327 15" stroke="#171714" stroke-width="1.5" />
</svg>
</a>
</div>.services-section .services-bottom {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}
.services-section .services-bottom p {
font-size: .875rem;
line-height: 1.6;
color: hsla(0, 0%, 0%, 0.55);
}
.services-section .services-bottom a {
display: flex;
justify-content: space-between;
gap: 2rem;
font-weight: 600;
font-size: .875rem;
line-height: 1.6;
padding-bottom: .5rem;
border-bottom: 1px solid hsla(0, 0%, 0%, 1);
color: hsl(60, 7%, 8%);
text-decoration: none;
}
.services-section .services-bottom a svg {
transition: transform .3s;
}
.services-section .services-bottom a:hover svg {
transform: translateX(.25rem);
}Output:
Built to make
a difference.
We turn ambitious ideas into brands and digital experiences people choose to remember.
Brand
systems
Distinct identities built to stay coherent, from the first impression to the thousandth.
Digital
products
Useful, intuitive products shaped around real behavior, not feature lists or fleeting trends.
Web
experiences
Fast, expressive websites that give your story structure and move people to act.
Have something else in mind? We shape our team around the problem.
Start a conversationFinal Output Code for Our Services Section HTML CSS #4:
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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet">HTML
<section class="services-section">
<div class="services-container">
<div class="services-header">
<span class="section-label">
Services / 03
</span>
<h2 class="services-title">Built to make<br>
a difference<span>.</span></h2>
<p>We turn ambitious ideas into brands and digital
experiences people choose to remember.</p>
</div>
<div class="services-cards-wrapper">
<div class="services-card">
<div class="services-card-header">
<span>01</span>
<div class="services-card-icon">
<svg width="100%" height="100%" viewBox="0 0 72 72" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" rx="36" fill="#FF5C35" />
<path
d="M36 51.75C44.6985 51.75 51.75 44.6985 51.75 36C51.75 27.3015 44.6985 20.25 36 20.25C27.3015 20.25 20.25 27.3015 20.25 36C20.25 44.6985 27.3015 51.75 36 51.75Z"
stroke="#171714" stroke-width="1.5" />
<path
d="M36 41.25C38.8995 41.25 41.25 38.8995 41.25 36C41.25 33.1005 38.8995 30.75 36 30.75C33.1005 30.75 30.75 33.1005 30.75 36C30.75 38.8995 33.1005 41.25 36 41.25Z"
fill="#171714" />
<path d="M36 15V25.5V15ZM36 46.5V57V46.5ZM15 36H25.5H15ZM46.5 36H57H46.5Z" fill="black" />
<path d="M36 15V25.5M36 46.5V57M15 36H25.5M46.5 36H57" stroke="#171714"
stroke-width="1.5" />
</svg>
</div>
</div>
<div class="services-card-body">
<h3>Brand <br>
systems</h3>
<p>Distinct identities built to stay coherent, from the first
impression to the thousandth.</p>
<div class="services-card-tags-wrapper">
<span class="services-card-tag">Strategy</span>
<span class="services-card-tag">Identity</span>
<span class="services-card-tag">Guidelines</span>
</div>
</div>
</div>
<div class="services-card">
<div class="services-card-header">
<span>02</span>
<div class="services-card-icon">
<svg width="100%" height="100%" viewBox="0 0 72 72" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" rx="36" fill="#D9FF4F" />
<path
d="M52.5 20.25H19.5C18.6716 20.25 18 20.9216 18 21.75V48.75C18 49.5784 18.6716 50.25 19.5 50.25H52.5C53.3284 50.25 54 49.5784 54 48.75V21.75C54 20.9216 53.3284 20.25 52.5 20.25Z"
stroke="#171714" stroke-width="1.5" />
<path d="M18 28.5H54H18ZM25.5 24.75H26.25H25.5ZM30 24.75H30.75H30Z" fill="black" />
<path d="M18 28.5H54M25.5 24.75H26.25M30 24.75H30.75" stroke="#171714" stroke-width="1.5"
stroke-linecap="round" />
<path d="M30.75 35.25L37.5 39L30.75 42.75V35.25Z" fill="#171714" />
</svg>
</div>
</div>
<div class="services-card-body">
<h3>Digital <br>
products</h3>
<p>Useful, intuitive products shaped around real behavior,
not feature lists or fleeting trends.</p>
<div class="services-card-tags-wrapper">
<span class="services-card-tag">UX & UI</span>
<span class="services-card-tag">Protptypes</span>
<span class="services-card-tag">Design Systems</span>
</div>
</div>
</div>
<div class="services-card">
<div class="services-card-header">
<span>03</span>
<div class="services-card-icon">
<svg width="100%" height="100%" viewBox="0 0 72 72" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" rx="36" fill="#8BA8FF" />
<path d="M19.5 50.25L36 18.75L52.5 50.25H19.5Z" stroke="#171714" stroke-width="1.5" />
<path d="M26.25 37.5H45.75H26.25ZM30.75 28.5H41.25H30.75ZM23.25 45H48.75H23.25Z"
fill="black" />
<path d="M26.25 37.5H45.75M30.75 28.5H41.25M23.25 45H48.75" stroke="#171714"
stroke-width="1.5" />
</svg>
</div>
</div>
<div class="services-card-body">
<h3>Web <br>
experiences</h3>
<p>Fast, expressive websites that give your story structure
and move people to act.</p>
<div class="services-card-tags-wrapper">
<span class="services-card-tag">Art direction</span>
<span class="services-card-tag">Development</span>
<span class="services-card-tag">Motion</span>
</div>
</div>
</div>
</div>
<div class="services-bottom">
<p>Have something else in mind? We shape our team around the problem.</p>
<a href="">Start a conversation
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16602 10H14.9993M10.8327 5L15.8327 10L10.8327 15" stroke="#171714" stroke-width="1.5" />
</svg>
</a>
</div>
</div>
</section>CSS
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
}
.services-section {
padding: clamp(3.5rem, calc(1rem + 6.67vw), 7rem) clamp(1.5rem, calc(1rem + 2.22vw), 3rem);
background-color: hsl(44, 33%, 94%);
color: hsl(60, 7%, 8%);
}
.services-section .services-container {
max-width: 90rem;
margin-inline: auto;
}
.services-section .services-header {
display: grid;
align-items: end;
gap: 2rem;
padding-top: 1.25rem;
border-top: 1px solid hsla(0, 0%, 0%, 0.25);
}
@media (min-width: 993px) {
.services-section .services-header {
grid-template-columns: 2fr 7fr 3fr;
}
}
.services-section .section-label {
font-weight: 500;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.98px;
text-transform: uppercase;
}
.services-section .services-title {
font-weight: 600;
font-size: clamp(3.5rem, calc(1rem + 6.11vw), 5.625rem);
line-height: .9;
letter-spacing: -0.07em;
max-width: 31.25rem;
}
.services-section .services-title span {
color: hsl(12, 100%, 60%);
}
.services-section .services-header p {
font-size: .875rem;
line-height: 1.7;
color: hsla(0, 0%, 0%, 0.65);
}
.services-section .services-cards-wrapper {
margin-top: 5rem;
border-block: 1px solid hsla(0, 0%, 0%, 0.25);
display: grid;
}
@media (min-width: 993px) {
.services-section .services-cards-wrapper {
grid-template-columns: 1fr 1.07fr 1fr;
}
}
.services-section .services-card {
padding: 2rem 1.75rem;
min-height: 35rem;
display: flex;
flex-direction: column;
height: 100%;
}
.services-section .services-card:first-child {
padding-left: 0;
}
.services-section .services-card:last-child {
padding-right: 0;
}
@media (min-width: 993px) {
.services-section .services-card:not(:last-child) {
border-right: 1px solid hsla(0, 0%, 0%, 0.25);
}
}
@media (max-width: 992px) {
.services-section .services-card {
padding-inline: 0;
}
.services-section .services-card:not(:last-child) {
border-bottom: 1px solid hsla(0, 0%, 0%, 0.25);
}
}
.services-section .services-card-header {
display: flex;
justify-content: space-between;
gap: 2rem;
}
.services-section .services-card-header span {
font-size: .75rem;
line-height: 1.3;
color: hsla(0, 0%, 0%, 0.55);
}
.services-section .services-card-header svg {
width: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
height: clamp(2.5rem, calc(1rem + 3.89vw), 4.5rem);
}
.services-section .services-card-body {
margin-top: auto;
}
.services-section .services-card-body h3 {
font-weight: 600;
font-size: clamp(2.5rem, calc(1rem + 2.64vw), 3.375rem);
line-height: .93;
letter-spacing: -2.27px;
margin-bottom: 1.25rem;
}
.services-section .services-card-body p {
font-size: .875rem;
line-height: 1.7;
color: hsla(0, 0%, 0%, 0.65);
margin-right: 1.625rem;
}
.services-section .services-card-tags-wrapper {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.services-section .services-card-tag {
font-weight: 500;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 0.99px;
text-transform: uppercase;
padding: 0.375rem .75rem;
border-radius: 10rem;
border: 1px solid hsla(0, 0%, 0%, 0.25);
}
.services-section .services-bottom {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}
.services-section .services-bottom p {
font-size: .875rem;
line-height: 1.6;
color: hsla(0, 0%, 0%, 0.55);
}
.services-section .services-bottom a {
display: flex;
justify-content: space-between;
gap: 2rem;
font-weight: 600;
font-size: .875rem;
line-height: 1.6;
padding-bottom: .5rem;
border-bottom: 1px solid hsla(0, 0%, 0%, 1);
color: hsl(60, 7%, 8%);
text-decoration: none;
}
.services-section .services-bottom a svg {
transition: transform .3s;
}
.services-section .services-bottom a:hover svg {
transform: translateX(.25rem);
}If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
