Step-by-Step Guide to Create Stunning Circle Cards
Circle cards are a visually appealing way to present steps, processes, or categorized information on your website. Using ordered lists (<ol>) and minimal CSS, you can create beautiful, responsive designs with vibrant accent colors. Below, we’ll walk through the process of creating “OL Circle Cards” with the provided HTML and CSS code.
Step 1: Setting Up the HTML Structure
The foundation of the design is a semantic ordered list (<ol>), where each list item (<li>) represents a step.
<h1>OL Circle Cards</h1>
<ol>
<li>
<div class="icon"><i class="fa-solid fa-bicycle"></i></div>
<div class="title">Step 1</div>
<div class="descr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li>
<div class="icon"><i class="fa-solid fa-car"></i></div>
<div class="title">Step 2</div>
<div class="descr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<!-- Add more steps as needed -->
</ol>
- Key Elements:
<h1>: The title of the section.<ol>: Ordered list containing<li>elements.- Each
<li>has:.icon: FontAwesome icons..title: Step title..descr: Description.
Step 2: Adding FontAwesome for Icons
To use the icons in the .icon div, you need to include the FontAwesome CDN in your project.
@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
Step 3: Styling with CSS
The CSS styles bring life to the structure by:
- Adding circle borders.
- Applying counter styles for numbering.
- Using accent colors for differentiation.
Import Google Fonts
The design uses the Exo 2 font. Import it at the beginning of your CSS:
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700&display=swap");
General CSS Reset and Body Styling
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
--color: rgba(30, 30, 30);
--bgColor: rgba(245, 245, 245);
min-height: 100vh;
display: grid;
align-content: center;
gap: 2rem;
padding: 2rem;
font-family: "Exo 2", sans-serif;
color: var(--color);
background: var(--bgColor);
}
Ordered List Styling
ol {
width: min(60rem, 90%);
margin-inline: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
list-style: none;
counter-reset: stepnr;
}
List Items with Accent Colors
Assign unique accent colors using the nth-child selector.
li:nth-child(6n + 1) { --accent-color: #b8df4e; }
li:nth-child(6n + 2) { --accent-color: #4cbccb; }
li:nth-child(6n + 3) { --accent-color: #7197d3; }
li:nth-child(6n + 4) { --accent-color: #ae78cb; }
li:nth-child(6n + 5) { --accent-color: #7dc7a4; }
li:nth-child(6n + 6) { --accent-color: #f078c2; }
Step 4: Adding Numbers to Circles
Using ::before for numbers:
ol li::before {
content: counter(stepnr);
color: var(--accent-color);
padding-left: 10rem;
font-size: 12rem;
font-weight: 700;
overflow: hidden;
}
Complete Code
HTML
<h1>OL circle cards</h1>
<ol>
<li >
<div class="icon"><i class="fa-solid fa-bicycle"></i></div>
<div class="title">Step 1</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-car"></i></div>
<div class="title">Step 2</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-helicopter"></i></div>
<div class="title">Step 3</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-plane"></i></div>
<div class="title">Step 4</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-rocket"></i></div>
<div class="title">Step 5</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-bus"></i></div>
<div class="title">Step 6</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
</ol>
CSS
/* Import Fonts and Icons */
@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700&display=swap");
/* General Styles */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
--color: rgba(30, 30, 30);
--bgColor: rgba(245, 245, 245);
min-height: 100vh;
display: grid;
align-content: center;
gap: 2rem;
padding: 2rem;
font-family: "Exo 2", sans-serif;
color: var(--color);
background: var(--bgColor);
}
h1 { text-align: center; }
ol {
width: min(60rem, 90%);
margin-inline: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
list-style: none;
counter-reset: stepnr;
}
/* Accent Colors */
li:nth-child(6n + 1) { --accent-color: #b8df4e; }
li:nth-child(6n + 2) { --accent-color: #4cbccb; }
/* Add the remaining colors here */
/* Circle Cards */
ol li {
counter-increment: stepnr;
width: 18rem;
/* Rest of styles */
}
Conclusion
Creating OL Circle Cards with HTML and CSS is a straightforward yet effective way to add visually appealing elements to your website. By leveraging ordered lists, vibrant accent colors, and simple styling techniques, you can transform basic content into an engaging user experience.
This tutorial equips you with all the tools to implement this design, including the complete code and explanations. Whether you’re showcasing steps in a process, highlighting features, or organizing content, these circle cards provide a modern and professional touch.
Start experimenting with different styles, colors, or icons to make this design uniquely yours. Your creativity is the limit! If you found this guide helpful, feel free to share it and let us know how you’ve implemented OL Circle Cards in your projects!
Codepen: Demo
