This code creates Ordered List Cards using HTML and CSS. It styles a list with step-by-step information in card format. It’s helpful for presenting instructions or content in an organized and attractive way.
You can use this code on your website or web application to display step-by-step instructions/wizard or content. It improves user engagement by presenting information in an attractive card format. It also adapts to mobile screens, ensuring a seamless user experience across devices.
How to Create Ordered List Cards HTML CSS
1. First, create the basic HTML structure for your ordered list cards. Here’s a sample structure:
<h1>Ordered List Cards</h1>
<ol class="ol-cards alternate" >
<li style="--ol-cards-color-accent:#f68121">
<div class="step"><i class="fab fa-codepen"></i></div>
<div class="title">Step One</div>
<div class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li style="--ol-cards-color-accent:#ed1c24">
<div class="step"><i class="fab fa-github"></i></div>
<div class="title">Step Two</div>
<div class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li style="--ol-cards-color-accent:#582c8b">
<div class="step"><i class="fab fa-html5"></i></div>
<div class="title">Step Three</div>
<div class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li style="--ol-cards-color-accent:#0166b4">
<div class="step"><i class="fab fa-css3"></i></div>
<div class="title">Step Four</div>
<div class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
<li style="--ol-cards-color-accent:#00a560">
<div class="step"><i class="fab fa-creative-commons"></i></div>
<div class="title">Step Five</div>
<div class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae culpa asperiores soluta officiis iusto quasi. Odio aliquid alias explicabo deleniti?</div>
</li>
</ol>
Inside the <ol> element, add your list items. Each <li> element represents a card. You can customize the content of each card, including the step icon, title, and content.
2. Now, let’s add some CSS to style our Ordered List Cards. Include this CSS code in a separate styles.css file or within a <style> tag in the HTML file’s <head>.
@import url("https://use.fontawesome.com/releases/v5.15.3/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
.cd__main{
display: block !important;
background: linear-gradient(to right, #d9a7c7, #fffcdc) !important;
}
body {
--color-bg: #f0f0f0;
--color-text: #303030;
background-color: var(--color-bg);
color: var(--color-text);
text-align: center;
font-family: "Poppins", sans-serif;
}
.ol-cards,
.ol-cards *,
.ol-cards *::before,
.ol-cards *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ol-cards {
--ol-cards-color-bg: var(--color-bg);
list-style-type: none;
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 45em;
padding: 2em;
gap: 2em;
counter-reset: ol-cards-counter;
}
.ol-cards li {
display: grid;
grid-template-areas:
"step title"
"step content";
padding: 1em 2em 1em 0;
row-gap: 0.5em;
column-gap: 2em;
box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.4),
inset 0.05em 0.05em rgba(255, 255, 255, 1);
counter-increment: ol-cards-counter;
text-align: left;
background-color: var(--ol-cards-color-bg);
}
.ol-cards.alternate li:nth-child(even) {
grid-template-areas:
"title step"
"content step";
padding: 1em 0 1em 2em;
}
.ol-cards li .step {
grid-area: step;
display: flex;
align-self: flex-start;
background-color: var(--ol-cards-color-accent);
border-radius: 0 50em 50em 0;
padding: 1em;
justify-content: flex-end;
box-shadow: inset 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.4),
0em 0.05em rgba(255, 255, 255, 1);
flex: 1;
gap: 1em;
}
.ol-cards li .step::before {
content: "0" counter(ol-cards-counter);
flex: 1;
align-self: center;
color: var(--ol-cards-color-bg);
font-weight: bold;
font-size: 2em;
text-shadow: 0.025em 0.025em 0.125em rgba(0, 0, 0, 0.4);
}
.ol-cards.alternate li:nth-child(even) .step {
border-radius: 50em 0 0 50em;
flex-direction: row-reverse;
}
.ol-cards li .step i {
color: var(--ol-cards-color-accent);
width: 2em;
height: 2em;
font-size: 1.8em;
border-radius: 50%;
display: grid;
place-items: center;
background-color: var(--ol-cards-color-bg);
box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.4),
inset 0.05em 0.05em rgba(255, 255, 255, 1);
}
.ol-cards li .title {
grid-area: title;
color: var(--ol-cards-color-accent);
font-weight: bold;
}
.ol-cards li .content {
grid-area: content;
font-size: 0.9em;
}
@media only screen and (max-width: 500px) {
.ol-cards{
padding: 1em;
}
.ol-cards li{
column-gap: 0em;
grid-template-areas:
'step title'
'content content';
grid-template-columns: min-content auto;
padding: 1em 0em;
}
.ol-cards.alternate li:nth-child(even){
column-gap: 0em;
grid-template-areas:
'title step'
'content content';
grid-template-columns: auto min-content ;
padding: 1em 0em;
}
.ol-cards li .title{
padding: 0 1em;
align-self: center;
width: auto;
}
.ol-cards li .step{
font-size: .5em;
}
.ol-cards li .content{
padding: 0 1em;
}
}
You can customize the appearance of your Ordered List Cards by modifying the CSS variables like --ol-cards-color-accent and adjusting the styles in the CSS code provided. Feel free to experiment with colors, fonts, and spacing to match your website’s design.
That’s all! hopefully, you have successfully created ordered list cards. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Neumorphic Buttons with Icons Using CSS- Mobile Apps Grid Menu UI Using HTML CSS
- Content Placeholder Animation Using CSS
- CSS Stylish Box with Animated Gradient Border
- HTML Button Hover Effects with Box-shadow
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.