Creating visually appealing card layouts w3-card
W3.CSS web development scripts provide the w3-card class to help web developers create attractive commercial webpage card layouts in preview. Cards are a type of website data and information container component used to display website content in an organized and clear order. The w3-card class defines web elements such as images, webpage titles, text data, clickable buttons, and text links in commercial websites, which help web developers display e-commerce products, services, or blog posts and articles on a website.
So, let’s create and customize card layouts using the w3-card class and other W3.CSS utility classes in W3.CSS.
Basic Card Layout Concepts in W3.CSS.
In a simple W3.CSS-based web development script, cards are essentially a data or information container. A website webpage defines a border, padding, and a lightweight shadow effect applied to provide depth to the design card.
Example of a simple card in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Simple Card in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/8898/8898827.png” height=”50″ width =”50″ alt=”product” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Our Services </b></h4>
<p>You can buy our top services. </p>
<ul>
<li><h6><b>Digital Marketing</b></h6></li>
<li><h6><b>Full stack Development</b></h6></li>
<li><h6><b>Machine Learning</b></h6></li>
</ul>
<button class=”w3-button w3-pink”>Read More</button>
</div>
</div>
</body>
</html>
Explanation of a simple card in W3.CSS.
- w3-card-4 – In this example, this card adds a shadow and border radius to create the effect.
- w3-margin – This W3.CSS class adds an empty space around the design card.
- w3-round-large – This W3.CSS class adds a rounded corner effect to the created card.
- w3-card-img-top – This W3.CSS class applies a unique class to the image within the developed card, making it appear more commercial as a web element of the designed card.
- w3-container – This W3.CSS class is used to indicate the content area (with text and buttons) of a designed card and services data information.
A webpage card with multiple elements in W3.CSS.
A user-defined webpage website can have multiple web elements defined in the designed card block, such as text headings, graphical images, text paragraphs, and linked buttons. This type of card layout is used for webpages, websites, services, e-commerce product cards, blogs, post previews, etc.
Example of a card with a title, image, text, and button in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card with Multiple Card Elements in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/3242/3242257.png” height=”70″ width =”70″ alt=”services” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Web Development</b></h4>
<p>Web development is the process of creating and maintaining webpages, websites, and web applications.
It includes the use of languages like HTML, CSS, JavaScript, and various programming languages.
</p>
<button class=”w3-button w3-indigo”>Explore More</button>
</div>
</div>
</body>
</html>
Explanation of a card with a title, image, text, and button in W3.CSS.
- w3-card-img-top – In this card example, the card image is displayed at the top of the card.
- A W3.CSS webpage card defines a card title, card description text, and a linked button.
- The w3-indigo class is used to apply an indigo background color to the defined card button, giving it a different preview as an action button.
A card with icons and action buttons in W3.CSS.
Web developers can use image icons alongside card text to make cards more interactive using W3.CSS scripts. You can use image icon links, the Font Awesome icon library, and others in W3.CSS scripts, allowing web developers to easily use icons within cards when needed.
Example of a card with icons and action buttons in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card with Icons and linked Buttons in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/8209/8209385.png” height=”70″ width =”70″ alt=”hotel” alt=”Card Image” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Abc International Hotel</b></h4>
<p>Our hotel provides you comfortable accommodation, quality services, and a relaxing stay for valuable guests. </p>
<button class=”w3-button w3-red”>
<i class=”fa-solid fa-globe”></i> View Services
</button>
</div>
</div>
</body>
</html>
Explanation of a card with icons and action buttons in W3.CSS.
- <i class=”fa-solid fa-globe”></i> – In this example, this is a link to the Font Awesome icon library. This example contains a global hotel icon.
- Here, we’ve displayed this icon with a button. The button has a red background with the w3-red:button class, which makes it appear different from other web card elements.
Cards with hover effects in a W3.CSS webpage.
To apply interactivity card effects in W3.CSS web development scripts, web developers can create cards that respond when a web user hovers the mouse pointer over the card. W3.CSS web formatting offers several built-in classes for hover effects. For example, designers can use these classes to modify the shadow, border, or background color when applying a hover effect to a webpage card.
Example of a card with a hover effect in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card with Hover Effect in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-round-large w3-hover-shadow-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/8086/8086179.png” height=”70″ width =”70″ alt=”yoga” class=”w3-card-img-top”>
<div class=”w3-container”>
<h4><b>Xyz Yoga Center</b></h4>
<p>Yoga is a practice that promotes physical fitness, mental relaxation, flexibility, and overall well-being. </p>
<button class=”w3-button w3-yellow”>Explore More </button>
</div>
</div>
</body>
</html>
Explanation of a card with a hover effect in W3.CSS.
- w3-hover-shadow-large – In this example, this class adds a large shadow effect when hovering over a user-defined webpage card, giving the user a 3D-like card preview.
- w3-hover-opacity – Web developers can use this class to modify the opacity of a card object when hovering over it. Due to which it displays a little blurry when the web user interacts with it.
Cards in a W3.CSS Grid Layout.
In W3.CSS web development scripts, if web developers are going to develop a webpage layout design with multiple cards, it is common to use a grid layout structure in such webpages. Web developers can easily develop a webpage with multiple cards by using the w3-row and w3-col classes in W3.CSS.
Example of a card grid layout in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Card Grid Layout in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-row w3-light-gray”>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/5968/5968350.png” height=”70″ width=”70″ alt=”python” class=”w3-card-img-top”>
<div class=”w3-container w3-red”>
<h4><b>Python Course</b></h4>
<ul>
<li><p>Python basics & code</p></li>
<li><p>Functions and loops</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course</button>
</div>
</div>
</div>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/3291/3291669.png” height=”70″ width =”70″ alt=”java” class=”w3-card-img-top”>
<div class=”w3-container w3-indigo”>
<h4><b>Java Course</b></h4>
<ul>
<li><p>Java basics and syntax</p></li>
<li><p>Classes, objects and OOP</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course</button>
</div>
</div>
</div>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/5968/5968371.png” height=”70″ width =”70″ alt=”swift” class=”w3-card-img-top”>
<div class=”w3-container w3-yellow”>
<h4><b>Swift Course</b></h4>
<ul>
<li><p>Swift basics and syntax</p></li>
<li><p>iOS apps and UI design</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course</button>
</div>
</div>
</div>
<div class=”w3-col m4″>
<div class=”w3-card-4 w3-margin w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/11485/11485808.png” height=”70″ width =”70″ alt=”machine” class=”w3-card-img-top”>
<div class=”w3-container w3-pink”>
<h4><b>Machine Learning Course </b></h4>
<ul>
<li><p>ML basics and models</p></li>
<li><p>Data prep and trains</p></li>
<li><p>Projects & practice</p></li>
</ul>
<button class=”w3-button w3-white”>Buy Course</button>
</div>
</div>
</div>
</div>
</body>
</html>
