Expandable Card UI Design

In web design, a card is a rectangular container that holds content such as images, text, buttons, and links and organizes the content into beautiful, easy-to-browse sections. Cards are a great and engaging way to display and organize information on a website. Today, we will share with you an expandable card snippet that expands when clicked and reveals the full details. The video tutorial below is a tutorial on how to create this snippet. Please watch the tutorial before collecting the source code.

Video Tutorial:

We hope you enjoyed the video tutorial above. Cards play an important role in creating a clean, well-organized layout. Each card focuses on a single piece of content on that website, allowing users to process that information quickly. News websites, blogs, and portfolio sites use cards in their designs. This helps them divide their articles, projects, or case studies into easy-to-scan sections. As mentioned in today’s blog, expandable cards are a type of interactive card that reveals more content when clicked, hovered over, or tapped. These types of cards improve the user experience by reducing clutter.

In today's blog post, we created an expandable card UI using HTML, CSS, and JavaScript. In the HTML part, a 'wrapper' container contains multiple cards (.item elements). Each card has a background image and some text inside a 'desc' div. Next, we used CSS styles to make the cards look smooth. Initially, by default, the cards will be small, and the card details will be hidden. We used JavaScript to add an event listener to each card. When a user clicks on a card, it expands (adding the .active class). This will reveal the full details of that card; other expanded cards will be shrunken.

You May Also Like:

- 3D Glowing card carousel slider

- Responsive CSS Card Overlay Animation

Expandable Card UI using HTML, CSS, and JavaScript [ Source Code ]:

To create this snippet, you need to create an HTML, a CSS, and a JS file. Then, copy the code from the code box below and paste it into those files. You can also download the code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->      
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expandable Card using HTML CSS and JavaScript</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <section class="wrapper">
        <div class="item active" style="background-image: url(1.jpg);">
            <div class="desc">
                <h3>Card Title</h3> 
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas quisquam ipsum delectus itaque eaque exercitationem eum est hic odit dignissimos.</p>
            </div>
        </div>
        <div class="item" style="background-image: url(2.jpg);">
            <div class="desc">
                <h3>Card Title</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas quisquam ipsum delectus itaque eaque exercitationem eum est hic odit dignissimos.</p>
            </div>
        </div>
    </section>

    <script>
        document.querySelectorAll('.item').forEach(item => {
        item.addEventListener('click', () => {
            document.querySelectorAll('.item').forEach(i => i.classList.remove('active'));
            item.classList.add('active');
        });
    });
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body, html {
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}
h3 {
	margin: 0 0 15px;
	font-size: 28px;
	line-height: 36px;
	font-family: "Fredoka", sans-serif;
	letter-spacing: 3px;
}
.wrapper {
	display: flex;
}
.item {
	margin: 0 15px 60px;
	width: 320px;
	height: 400px;
	display: flex;
	align-items: flex-end;
	background: #343434 no-repeat center center / cover;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}
.item.active {
	width: 500px;
	box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
}
.item::after {
	content: "";
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
.desc {
	padding: 0 24px 12px;
	color: #fff;
	position: relative;
	z-index: 1;
	overflow: hidden;
	transform: translateY(calc(100% - 54px));
	transition: all 0.4s ease-in-out;
}
.item.item.active .desc {
	transform: none;
}
.desc p {
	opacity: 0;
	transform: translateY(32px);
	transition: all 0.4s ease-in-out 0.2s;
	margin-bottom: 20px;
	line-height: 1.7;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
}
.item.active .desc p {
	opacity: 1;
	transform: translateY(0);
}

Cards are considered a powerful design element on a website. These elements not only organize content into beautiful, easy-to-browse sections but also improve readability, navigation, and engagement. We hope you have collected the source code. To get more information like this, click on the "Load More" button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Expandable Card UI using HTML, CSS, and JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Expandable Card UI Design

Video Tutorial:

Expandable Card UI using HTML, CSS, and JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form