Taco Steemers

A personal blog.

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


Wide 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
Divided in to sections
The top section is an image, the below is 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%;
    }