CSS card design examples
First card design
The outer container
display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:left;
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%);