CSS card design examples

First card design

The outer container

The outer container has this style:

display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:left;

Java logo via Wikimedia Commons

We can also add images

The card itself has this style:

border-radius: 25px;
max-width: 520px;
padding: 20px;
margin: 20px;
flex-grow: 0;

Card style continued

There is space here
for list items,
or for hyperlinks.

color: var(--code-text-color);
box-shadow: inset 3em 1em 0 0
var(--card-background-color);

/* For the contents of this card */
display: inline-flex;

Light mode colors

--background-color: rgb(248,248,255);
--card-background-color: white;
--text-color: black;

Dark mode colors

--background-color: rgb(30, 30, 30);
--card-background-color: rgb(60, 60, 60);
--text-color: rgb(238, 238, 238);

Classes for the image

.small {
    max-width: 75px;
    max-height: 75px;
    padding: 10px;
}
.small * {
    max-width: 75px;
    max-height: 75px;
}

Remaining classes

For the image attribution

.attribution {
    font-size: 50%;
}

Let tags with big content grow to fit, without getting too close to the neighbors.

.wide {
    flex: 1;
}

Second card design

A small difference

Two lines of CSS make the difference between the backgrounds in the previous design and this design.

Instead of box shadow, we use:

background: radial-gradient(circle, var(--card-background-color) 35%,
var(--background-color) 100%);

clip-path: polygon(
0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);