CSS card design examples
Overview of card designs
Title on top
The background image is shown at the original size.
To find out how something on a webpage has been made, we can right-click it and then click "inspect" or "inspect element".
Title on top
The text now has a background colour to make it more readable, and the background image set to cover the entire element.
Title floating on top of an image
_waving.svg)
Wide title on the side
_waving.svg){kind=link}
Thin title on the side
Inset
We can also make sure the text does not overlap the border, by adding a margin of a similar size to the border thickness.
- We can add a list here
- Or we could have a paragraph of text
Cards don't always need a clear border
We can also use a design without borders.
Multiple shapes
It can also be fun to use multiple borders or multiple backgrounds.
Try hovering a mouse over here!
Hover over the picture!
The picture has the hover class:
.hover:hover {
transform: scale(1.5, 1.5);
z-index: 500;
}
Explanation of how card designs work
The outer container
The outer container has this style:
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:left;
Let tags with big content grow to fit, without getting too close to the neighbors:
.wide {
flex: 1;
}
We can also add images
The card itself has this style:
border-radius: 25px;max-width: 520px;
padding: 20px;
margin: 20px;
flex-grow: 0;
Classes for the div that contains the small image
.small {
max-width: 75px;
max-height: 75px;
padding: 10px;
}
.small * {
max-width: 75px;
max-height: 75px;
}
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;
Remaining classes
For the image attribution
.attribution {
font-size: 50%;
}