Uses

Cards are used as a way to display content in an organized and consistent manner across a site. The use of cards give the user a visual cue about what type of information they are about to read. On the School of Medicine, cards are used primarily for news items. A featured image is displayed, followed by the date, title, description, and tag (or category) of that particular article.

Styles

Cards are rectangle shaped with slightly rounded corners and a drop shadow. The images used have a 3:2 aspect ratio. The next element is the article publication date, which is always in all caps with the color of #838383. The title is an h2 which links to the article, followed by the description (p tag). Finally the category mimicks the same style as the article publication date.

Cards can be a variety of sizes, but typically cover either 4 columns (one third of the page), 8 columns (two-thirds of the page) or all 12 columns (full-width page). For a card that covers 12 columns, the featured image will cover 8 columns, while the content covers the final 4 columns.

Examples

The above is an example found on the News page on the School of Medicine site. This style represents a row of three 4-column cards. The example on the far right shows a video news article. While the video thumbnail is placed on the featured image thumbnail, the video will not directly play within the card. This will take the user to the news article where the video will display.

Code

HTML

CSS