HTML Card

Introduction

A card is a versatile and expandable content container. It contains choices for headers and footers, a large content selection, contextual background colors, and strong display settings. If you're acquainted with Bootstrap 3, cards replace our previous panels, wells, and thumbnails. Similar functionality to those components is offered as modifier classes for cards.

Regarding web development, no tool is as basic as CSS and HTML, the two languages responsible for producing visually attractive and effective site designs. A card design is one of any website's most common design components. It is a fantastic technique for displaying content compact and orderly, making it easy for the user to explore the information.

With free HTML and CSS card code samples accessible online, designers and developers can quickly experiment with various layouts and functionality.

Requirements

• Create a series of cards, each component comprising a title, picture, content, and, optionally, a footer.
• Each card in the collection should be the same height. The optional card footer should be attached to the bottom of the card.
• Each card in the group should match up in two dimensions—vertically and diagonally.

Example

Cards are constructed with as minimal markup and styles as possible yet still manage to give a ton of control and flexibility. Built using Flexbox, they allow simple alignment and combine nicely with other Bootstrap components. They have no margin by default, so utilize spacing tools as required.

Below is an example of a basic card with mixed content and a set width. Cards have no predetermined width to start; thus, they'll automatically occupy the entire width of their parent element. That is readily customizable with our numerous size choices.

HTML

<div class="card">

  <img src="another_avatar.png" alt="Avatar" style="width:100%">

  <div class="container">

    <h4><b>Jane Smith</b></h4>

    <p>Designer & Developer</p>

  </div>

</div>

CSS

.card {

  /* Add shadows to create the "card" effect */

  boxshadow: 0 9px 11px 7 rgba(0, 0.3, 0, 0.3);

  transition: 0.4s;

}

/* On mouse-over, add a deeper shadow */

.card: hover {

  boxshadow: 0 11px 0px 0 rgba(0, 0.3, 0, 0.4);

}

/* Add some padding inside the card container */

.container {

  padding: 8px 20px;

}

Choices Made

Each card is set out using a CSS grid layout despite the layout being one-dimensional. That permits the use of content sizing for the grid tracks. To put up a single-column grid, we may utilize the following:

.card {

  display: grid;

grid-template-rows: max-content 200px 1fr;

}

• Display: grid transforms the element into a grid container. The three values of the grid-template-rows property split the grid into a minimum of three rows, determining the height of the first three children of the card in sequence.
• Each card comprises a <header>, <image>, and <div> in that sequence, with some additionally including a <footer>.
• The track, or heading row, cannot extend since its max-content setting is applied.
• The picture track is set at 200 pixels in height. The third track, where the content resides, is set to 1fr. That implies that it will fill any excess space.
• Any children beyond the three with explicitly stated widths produce rows in the implicit grid, which fits the material supplied. These are auto-sized by default. If a card has a footer, it is auto-sized. The footer, when present, adheres to the bottom of the grid. The footer is auto-sized to accommodate its content; the content <div> then stretches to take up any surplus space.

The following ruleset produces the grid of cards:

.cards {

  display: grid;

grid-template-columns: repeat(auto-fill, min-max(230px, 1fr));

  gap: 20px;

}

The grid-template-columns attribute determines the widths of the grid columns. In this scenario, we configured the grid to auto-fill, with repeating columns that are at least 230 pixels but allowed to extend to cover the available space. The gap attribute establishes a space of 20 pixels between adjacent rows and adjacent columns.

Structure of HTMLWe will first organize the HTML for our card. Five elements are similar while looking at each card. I've shown them in the figure that follows:

Parts of our Card

• Card: The main section and the header are the two child components in our parent component.
• Header: All of the HTML headings are included in this component.
• Primary section: The icon and the description are the two child components of this component.
• Google's emblem is located in this component.
• The description of it is included in this element. Primary section.

Alternative Techniques

• Each card may alternatively be laid out using Flexbox. The flex property on each row, instead of the card container
• It is used with Flexbox to define the size of each card's rows.
• With Flexbox, the kids, not the parents, decide the Flex items' dimensions.
• Whether you opt to utilize Grid or Flexbox depends on your choice, whether you like managing the tracks from the container or prefer attaching rules to the items.
• We picked a grid for the cards since you normally want them lined up vertically and horizontally. Additionally, a subgrid may be used to connect the components of each card to the components of neighboring cards. Flex has no hack-free counterpart to Subgrid.

Adding an External Stylesheet to a Card Component

Method

So you understand how to add CSS to HTML. Allow me to use an external stylesheet for this exercise. Add to the element by creating a new file called style.css.

CSS rule set

To apply a 50% width to the picture, add this:

img {

width: 50%;

}

• To choose and style an element, you need the attribute you want to style, its value, and a selector.
• The property is enclosed in curly brackets, separated by colons, and concluded with semicolons; this arrangement is called a ruleset.

Accessibility considerations

Depending on the content of your card, there may be things you could or should change to boost accessibility. For a longer discussion of these issues, see Heydon Pickering's Inclusive Components: Card.