Diamond Card Layout with CSS

#html #css #codenewbie #webdev

Today, I'll show you how to design a diamond card layout (items should be exactly four) with a few steps using HTML and CSS

Step 1 - Setting up the HTML structure of the layout
It is worth knowing that your HTML structure is very important. Poor HTML structure will lead to complications when styling your CSS.
First, let's create a section in our html body for us to construct the layout for the diamond cards. Next, create a container that will hold the cards.

The simple trick is that the two cards we want to be at the top and bottom of the diamond should be wrapped together in a container, see the code below:

 <section class="diamond-card">
            <h1>Diamond Card section design with CSS</h1>
            <div class="card-container">
                <div class="card">
                    <div class="card-content card-content-1">
                        <h2>Launch your product</h2>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                        <div class="img-container"><img src="images/process-4.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-2">
                        <h2>Project brief</h2>
                        <p>Lorem ipsum dolor sit amet nhir consectetu nhir adipisicing elit. </p>
                        <div class="img-container"><img src="images/process-1.svg" alt="process"></div>
                    </div>
                    <div class="card-content card-content-3">
                        <h2>Start Developing</h2>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-3.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-4">
                        <h2>Wireframes & Design</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-2.svg" alt="process"></div>
                    </div>
                </div>
            </div>
 </section>

Step 2 - Adding CSS styles
Let's add some basic CSS styles. By default, html elements have margin and padding (usually about 8px) set by the browser. We overwrite these properties using the global selector "*" and setting the values to 0.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-weight: 600;
  color: #7f7e84;
  text-align: center;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.445);
}

.diamond-card {
  padding: 1rem 0;
}

Next, target the "card-container" class and give it a display of flex to arrange the cards side by side on the same row.


.card-container {
  width: 80%;
  margin: 40px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card {
  flex-basis: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.card-content {
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 22px 0 rgba(128, 128, 129, 0.37);
}

.card-content h2 {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1.3rem;
}
.card-content p {
  color: #5c5b5b;
  font-size: 14px;
}

.img-container {
  margin-top: 10px;
  text-align: right;
}

.img-container img {
  width: 7rem;
}

That's basically it! The rest of the styling is up to you
We can go ahead and add some hover effect and border designs to each card:

.card-content:hover {
  cursor: pointer;
  transition: 0.3s;
  transform: scale(1.1);
}

.card-content:hover p {
  color: rgb(34, 34, 34);
}

.card-content-1 {
  border: 3px solid #45d3d3;
}

.card-content-2 {
  border: 3px solid #ea5353;
}

.card-content-3 {
  border: 3px solid #fc4ac1;
}

.card-content-4 {
  border: 3px solid #549ef2;
}

There you go. We've just designed a diamond card layout. Play around with it, tweak it.

You can try and make the design responsive as a challenge.

Top comments (9)

David Wheatley • Aug 17 '21

This could be done much simpler. Place all the cards as siblings in the DOM, then, on the parent container, set display: grid along with grid-template-columns: 1fr 1fr 1fr and grid-template-rows: 1fr 1fr.

Use .parent :first-child, .parent :last-child to set grid-row: 1 / 3 to span across the rows.

This should be (about) right. Might need to configure some align-items: center or similar.

This has the added benefit of easily manipulating the grid layout when the viewport gets bigger or smaller.