Components: Cards
Use cards to display groups of related content in an easy-to-read layout.
Quick Summary
Creating Cards: Create a card using a div element which will hold an image element,
along with a second div to hold card content such as a heading, paragraph, or button. Style the card
according to either a Horizontal or Vertical layout. All cards have a 5px border-radius, and the two
corners of the image which touch the edge of the card must have a 5px border-radius as well. Ensure
that the card content has 25px of spacing between itself, the edge of the card, and the card image.
A card drop shadow can be added for effect, as demonstrated in the examples below.
Horizontal Cards: When styling a horizontal card, set the card containing div to
display as flex, with the flex-direction set to row and a specified height, for example 200px. Set
the card's image width to 30% with overflow hidden and object-fit set to cover. Give the card content
div a width of 70% to fill the remaining space in the card.
View on Codepen.
Vertical Cards: When styling a vertical card, set the card containing div to
display as flex, with the flex-direction set to column and your desired width. Set the image width
to 100% and height to your desired height, for example 200px. Set the card's image width to 30% with
overflow hidden and object-fit set to cover. The card content should be set to a width of 100%.
View on Codepen
Creating Cards
Whether creating horizontal or vertical cards, the HTML structure is the same. Create a div element for the card itself, then create an img element inside, along with a second div to hold the rest of the card's content. Inside the inner div element, add your heading, body content, and button as appropriate.
Card Variations
Card: Horizontal
Follow this example to build horizontal cards. The horizontal cards are intended for use in a vertical layout of cards. View on Codepen
Card Title
Information about Card's topic
Card: Vertical
Follow this example to build vertical cards. The vertical cards are intended for use in either a horizontal, grid, or vertical layout of cards. When designing for mobile, use a vertical layout of cards. View on Codepen
Card Title
Information about Card's topic