Creating Custom Card Components With HTML and CSS

While card components may appear simple, there are specific criteria to consider when creating them. You’ll encounter various types of card components to start with and, as a web developer, you must ensure that your interface is accessible.

Find out how to build card components using HTML and CSS and learn about accessibility considerations and customization.

HTML Structure for Card Components

The anatomy of a card includes the card container, its header, image, and body, and an optional card footer.

You will create three simple card components: content, product, and profile cards. These are some of the most common card types found on the web.

Start by creating a container div, nesting three more div tags with class attributes for each card within it, with appropriate child elements for each of the three cards. You should use elements that account for all the parts in the card’s anatomy. For example, the content card has an image tag for media, a h3 tag for the title, and a p tag for text.

 <div class="card-container">
    
    <div class="content-card">
        <img src="https://images.unsplash.com/photo-1500989145603-8e7ef71d639e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A workspace with a keyboard notebook, cup of coffee and an earpiece">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
       excepturi explicabo molestiae natus magnam rem...</p>
        <a href="#">Read More</a>
    </div>
    
    <div class="product-card">
        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Headphones on a yellow background">
        <h3>Product Name</h3>
        <p>$19.99</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Aspernatur, voluptatibus.</p>
        <a href="#"><button>Add to Cart</button></a>
    </div>
    
    <div class="profile-card">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A white male wearing a black button up shirt">
        <h3>John Doe</h3>
        <p>Web Developer</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Expedita tempora eos molestias repellat?</p>
        <a href="#" class="profile-link">View Profile</a>
    </div>
</div> 

Here’s what this should look like in your browser, by default, before you apply any custom styling:

If you want to create more cards or include more content in a single card, do so before you continue.

CSS Styling for Card Components

Using CSS, you can individually style each card to make them visually appealing. Use the universal selector to reset margins, paddings, and position using box-sizing. Then style the container by giving it padding to create some space.

 ​​​​​​* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
.card-container 
    padding: 20px;
 

Next, use a multiple selector for all the cards, give it a margin to provide space around each card, and set the display and flex-direction for layout. Also, set a border to define the cards, border-radius for some curves, and max-width for responsiveness.

 .content-card,
.product-card,
.profile-card 
    margin: 20px;
    display: flex;
    flex-direction: column;
    border: 2px solid #ccc;
    border-radius: 7px;
    max-width: 250px;
 

Now focus on each card, starting with the content card, and give it a background color and padding. Add descendant selectors for the elements in the content card.

Style the image with max-width and border-radius. Set the margin, font-family, and font size for the h3. For the anchor tag, remove text decoration, and set the color, margin-top, and font size.

 .content-card 
    background: #E9724C;
    padding: 10px;
.content-card img 
    max-width: 100%;
    border-radius: 5px;
.content-card h3 
    margin: 10px 0;
    font-family: monospace;
    font-size: 1.5rem;
.content-card a 
    text-decoration: none;
    color: #6f2ed8;
    margin:12px 0 7px 0;
    font-size: 1rem;
 

The product card will require more style because of its extra elements. Create selectors for each child element and style them accordingly.

The button element contains the most style attributes to achieve the call-to-action effect. Align only the button to the right by setting the align-self to flex-end in the anchor selector.

 .product-card img 
    border-radius: 5px 5px 0 0;
    width: 100%;
.product-card h3 
    margin: 5px 10px;
    font-family: monospace;
    font-size: 1.5rem;
.product-card p 
    margin: 5px 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
.product-card a 
    align-self: flex-end;
.product-card button 
    width: 100px;
    height: 30px;
    margin: 10px;
    border: 1px solid #8f3642;
    border-radius: 4px;
    background-color: #FFC857;
    font-weight: 700;
    cursor: pointer;
 

Finally, style the profile card. Set the border radius on the top-right and top-left of the image to match the container. Adjust the image size and fit if necessary. Use at least two font types and complementary colors on texts for definition. Also, you can make the actionable element—i.e. the anchor tag—stand out with a border.

 .profile-card img 
    border-radius: 5px 5px 0 0;
    height: 200px;
    object-fit: cover;
.profile-card h3 
    margin: 10px;
    font-family: monospace;
    font-size: 1.5rem;
.profile-card p:first-of-type 
    margin:0px 10px;
    font-family: 'Times New Roman', Times, serif;
    color: cornflowerblue;
.profile-card p:last-of-type 
    margin: 5px 10px;
    font-size: 0.9rem;
.profile-card a 
    text-decoration: none;
    margin: 5px 10px 10px 10px;
    padding: 5px 15px;
    align-self: center;
    border: 1px solid cornflowerblue;
    border-radius: 15px;
    color: black;
    font-family: monospace;
    font-weight: 500;
 

After styling, your cards should look like this:

Card Layout and Flexibility

Responsiveness is vital to provide a seamless experience with the interface across devices. You can use either CSS Flexbox or CSS Grid for the layout. Finally, you can use media queries for responsiveness.

Using CSS Flexbox

Firstly, add a display attribute and set it to flex on your card container selector. Apply flex-wrap and set it to wrap, so the cards can wrap within a small screen size.

Also, set the align-items and justify-content properties to your desire.

 ​​​​​​.card-container 
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
 

The page should look like this:

That concludes responsiveness on larger screen sizes. For a smaller viewport, like a mobile phone, you can use a media query rule and set the max-width.

Within the media query, determine which elements you wish to change. In this case, the card container will change.

Set the flex-direction to column, so the cards stack vertically. To display the cards in the center of the screen, horizontally, set the justify-content and align-items properties to center:

 @media screen and (max-width: 480px) 
  .card-container 
      flex-direction: column;
      justify-content: center;
      align-items: center;
  
 

To see the media query effect, check the code on CodePen.

Using CSS Grid

First, set the card container’s display to grid. Use grid-template-columns to allow the cards adjust their width automatically. Use a grid-gap for spacing between the cards. Use justify-items to center the cards.

 .card-container 
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    justify-items: center;
 

The page should look like this:

For mobile screens, apply a media query. Within the query, modify the grid layout for smaller viewports. Set grid-template-columns to 1fr to make each card occupy the full width. Also, setting justify-items and align-items properties to center will center the cards both horizontally and vertically.

 @media screen and (max-width: 480px) 
  .card-container 
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
  
 

By combining CSS Grid and media queries, the cards will wrap on larger screens and stack vertically on smaller screens, achieving a responsive card layout. To see the media query effect, check the code on CodePen.

Accessibility Considerations for Card Components

It is crucial to ensure that card components you create are accessible to all users, including those with disabilities. Here are some key considerations to make card components more accessible:

• Semantic HTML
• Keyboard navigation
• Focus styles
• ARIA labels and roles
• Alt text
• Proper heading structure
• Color contrast

By implementing these accessibility considerations, web developers can ensure that card components are inclusive.

Customization and Further Exploration

You can go further with customizing your card component. Here are some ideas you can look into:

• Transitions and animations
• Image styles
• Background and color schemes
• Border styles
• Interactive elements

There are plenty of different ways in which you can customize your card components, so feel free to experiment.

Create Visually Appealing and Responsive Card Components

Card components can play a role in almost any website. Crafting one with HTML and CSS is easy, but knowing how to handle accessibility is also important.

There are other CSS effects you can try out, like CSS filters and blend mode for visual effects. Practice creating more with different customization for visual appeal.