How to create a simple card component in CSS

Last Updated on Nov 29, 2023

CSS card component with Header, Body, and Footer.

A card component in CSS is a box that can include contents such as headers, footers, titles, forms, tables, lists, images, and so on. We use cards to separate contents and display collections of contents. An example is the blog you're reading right now.

In this article, I will show you how to create a simple card that contains a card header, body, and footer using HTML and CSS.

Without further delay, let's get into it.

  1. Create the neccessary files

    In the folder of your choice, create the following files: index.html and style.css.

  2. Create the HTML card

    Type the following code in index.html 

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to create a simple card componenet in CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card w-50 mx-auto">
      <div class="card-header">
        Card Header
      </div>
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="card-footer">
        Card Footer
      </div>
    </div>
  </body>
</html>

    Our HTML card starts with a container that has a class card. Inside the container, we can have containers with the classes card-header for header, card-body for body, and card-footer for footer.

  3. Style the card with CSS

    Type the following code in style.css 

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: hsl(0, 0%, 92%);
  padding: 10px;
}
.card {
  border: 1px solid hsl(0, 0%, 80%);
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}
.card-header {
  border-bottom: 1px solid hsl(0, 0%, 80%);
}
.card-footer {
  border-top: 1px solid hsl(0, 0%, 80%);
}
.card-header, .card-footer {
  background-color: hsl(0, 0%, 95%);
}
.card-body, .card-header, .card-footer {
  padding: 16px;
}
.w-50 {
  width: 50%;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

    To style a card in CSS, we just need to make use of the border and background-color. By using border-radius, we can make our card corners rounded. We also set the overflow to hidden because if we don't, the child of .card will cover its corners; hence, the border-radius will look like it's not working.

Summary

In this tutorial, we have created a card using HTML and CSS by using the border, background-color, border-radius, and overflow set to hidden.

© John Michael Balbarona