CSS Card Design

Here’s a simple HTML CSS card design example with an image shape changed using the CSS clip-path property.

Final Output:

css card design

Card Title

Some description about this card you don’t need to read.


1. Add a div with a class card. Add your image, title, and description using the following HTML structure.

<div class="card">
    <img src="..." alt="">
    <div class="description">
        <h2>Card Title</h2>
        <p>Some description about this card you don't need to read.</p>
        <button>Know More</button>
    </div>
</div>

Set some max-width for the card and image.

.card{
  max-width: 20em;
}
img {
  max-width: 100%;
}

Output:

css card design

Card Title

Some description about this card you don’t need to read.

2. Set text-align to center to align all card elements to the center. And set a box shadow or a border for the card.

.card{
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

Button styling:

button {
  font-size: 1em;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #836953;
  border: none;
}

Output:

css card design

Card Title

Some description about this card you don’t need to read.

3. To get the image’s slanted edge, use the CSS clip-path property.

Clip path will only display the part inside the region you define.

We’ll be using the polygon function here. How it works is, you can define the position of the image corners, like plotting points on graph paper using the x and y coordinates.

So the top-left corner is 0 0, the bottom-left is 0 100%, the bottom-right is 100% 85%, and the top-right is 100% 0%.

img {
  clip-path: polygon(0 0, 0% 100%, 100% 85%, 100% 0%);
}

Add some padding to the description.

.description {
  padding: 1em 2em 1.5em;
}

Output:

html css card design

Card Title

Some description about this card you don’t need to read.


Final Output Code for CSS card design example:

HTML:

<div class="card">
    <img src="..." alt="">
    <div class="description">
        <h2>Card Title</h2>
        <p>Some description about this card you don't need to read.</p>
        <button>Know More</button>
    </div>
</div>

CSS:

.card {
  max-width: 20em;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.card img {
  max-width: 100%;
  clip-path: polygon(0 0, 0% 100%, 100% 85%, 100% 0%);
}
.card button {
  font-size: 1em;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #836953;
  border: none;
}
.card .description {
  padding: 1em 2em 1.5em;
}

Video explanation for CSS card design example:

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x