Creating Cards using CSS

In modern day web design, cards are used a lot. Cards look clean and also look like the Android Material design. We can very easily create both Text and Picture cards using the box-shadow property. If you do not know about the CSS property box-shadow, follow the link.

Picture Card with CSS

Picture cards can be used to display article snippets, with a picture on top and the article title in the bottom, or you can use it to display user profiles, or anything else. Picture cards can be used for a variety of purposes.

.picture-card {
    width: 250px;
    box-shadow: 0 4px 8px 0 grey;
    text-align: center;
}

Live Example →

Text Card with CSS

Text cards can be used to create Calendars, or Weather Report formats etc.

.text-card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
}

.heading {
    background-color: #FF9100;
    color: white;
    padding: 40px 10px;
    font-size: 40px;
}

Live Example →