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.
More Stories
Beautiful examples of minimalist website design
Top Web Design Firms Announced by SEMFirms for May 2024
Enhance Your Online Visibility with an Elite Web Design Service