Creating a Card Layout in HTML

A "card" is a UI component used to display related information in a highly visual, contained block. By using basic HTML structuring and standard CSS properties like box-shadow and border-radius, you can create beautiful cards from scratch.

Cards are extremely popular in modern web design and are frequently used to list things like blog articles, feature sets, products, and user profiles.

Establishing the HTML Structure

To create a card, we typically use a parent element (such as a div) to act as the card's boundary. Inside, we might place an image at the top using the img tag, followed by a "card body" div to hold the text content securely:

Styling the Card container

The defining feature of a card is its "contained" look. We can accomplish this by using border-radius to round the corners, and applying a box-shadow to give it a sense of elevation off the page background:

Styling the Image

When placing an image at the top of a card, it's best to force it to span the entire width of the card. The object-fit property ensures the image scales correctly without warping:

Full Working Example

Below is a fully styled card. Notice the use of padding inside the .card-body class to keep the text away from the edges of the card:

<!DOCTYPE html>
<html>
<head>
<title>Card Layout Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f4f7f6;
  }
  
  /* The Card Container */
  .card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    overflow: hidden; /* Keeps the image inside the border radius */
    max-width: 320px; /* Restrict width for this example */
    margin: 0 auto;
  }

/* Card Image */
  .card-img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image covers the area without distorting */
  }

/* Card Content */
  .card-body {
    padding: 20px;
  }

.card-title {
    margin: 0 0 10px 0;
    font-size: 1.5em;
    color: #333;
  }

.card-text {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
  }

/* Card Button */
  .card-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
  }

.card-btn:hover {
    background-color: #0056b3;
  }
</style>
</head>
<body>

<div class="card">
  
  <img src="/pix/samples/4m.jpg" alt="Placeholder Image" class="card-img">
  
  <div class="card-body">
    <h3 class="card-title">Explore the Mountains</h3>
    <p class="card-text">Discover breathtaking views and challenging trails. Your next great adventure is waiting for you at the peak.</p>
    <a href="#" class="card-btn">Read More</a>
  </div>
</div>

</body>
</html>

View Output Full Screen Preview