DEV Community

Cover image for Diamond Card Layout with CSS
Veed - The Hood Developer
Veed - The Hood Developer

Posted on

Diamond Card Layout with CSS

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>   
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

There you go. We've just designed a diamond card layout. Play around with it, tweak it.
Live screenshot
You can try and make the design responsive as a challenge.

Discussion (9)

Collapse
davwheat profile image
David Wheatley

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.

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

Thank you for this I'll give it a tryπŸ˜πŸ‘πŸΎ of course there is never one way to solve a problem.

Collapse
drazharzaman profile image
Azhar Zaman

Nice content. Thanks

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

Thank you Azhar

Collapse
vosibop profile image
richard

Interesting. πŸ‘πŸΎπŸ‘πŸΎπŸ‘πŸΎ great job and write-up boss.

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

Thank you boss πŸ™πŸΎ

Collapse
ck2019 profile image
Creuma Kuzola

I've made a version of this code using grid layout.
U can access here: github.com/Creuma-Kuzola/Diamond-C...

Collapse
eugoboss profile image
Eugoboss

Thanks i really like this design.

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

I'm glad you like it