Ordered List Cards HTML CSS

Ordered List Cards HTML CSS
Code Snippet:Ordered List Cards
Author: Mark Boots
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 1,633
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X