Combining images, text, and buttons in cards
Webpage website card blocks are a universal UI component element in W3.CSS web development scripts. Using these cards, W3.CSS web developers can easily implement graphical images, text, sentences, blog posts, posts, and hyperlink buttons within cards. These card elements can be used on a website to display e-commerce products, blogs, posts, services, or any digital content information that needs to be visually organized and displayed by grouping them into blocks or cards.
The Cards block, designed in W3.CSS, makes it easy to structure and style cards with its built-in ready-made W3.CSS classes for borders, shadows, margins, padding, and responsiveness of these webpage elements. Below are details on how to add and display these W3.CSS card web elements to a webpage in a clear and visually ordered manner.
A basic card concept with an image, text, and a button in W3.CSS.
Here, we create a simple webpage card layout with an image at the top, followed by a card title and some descriptive text declaring product and services. There’s a Buy or Read More button for user interaction.
Example of a simple card with an image, text, and a 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 Image, Text, and Button Attributes 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-pink w3-round-large”>
<img src=”https://cdn-icons-png.flaticon.com/128/7666/7666328.png” height=”50″ width=”50″ alt=”Ev” class=”w3-card-img-top”>
<div class=”w3-container w3-indigo”>
<h4><b>Tata Ev</b></h4>
<p>Tata EV is a smart, stylish, eco-friendly car offering comfort, powerful performance, and a greener future. </p>
<ul>
<li><h6>Tata EVs are smart, stylish, and eco-friendly cars. </h6></li>
<li><h6>They offer smooth performance, modern technology, and comfort. </h6></li>
<li><h6>A great choice for cleaner, greener everyday travel. </h6></li>
</ul>
<button class=”w3-button w3-aqua”>Read More</button>
</div>
</div>
</body>
</html>
Explanation of a simple card with an image, text, and a button in W3.CSS.
- w3-card-4 – This adds a shadow and rounded corner effect to the card block in this example.
- w3-card-img-top – This class automatically formats images to display them in the proper order at the top of the card.
- w3-container – This class is used to display card content (card title, text, and button) grouped together in a container with padding effects.
- w3-button w3-aqua – Displays a button at the end, adding an aqua color, allowing you to use this button as a call-to-action.
A card in W3.CSS with an image on the left, text on the right, and a button.
Here, we design a webpage website layout in W3.CSS. Images are displayed on the left side of the card, text on the right side, and a button on the right side. This is a common design pattern structure in the card design pattern, used to design webpage card content that contains a lot of graphical images, such as online business product listings or company service descriptions.
Example of a left-aligned 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 Left Align Image, Text, and Button Attributes 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-teal w3-round-large”>
<div class=”w3-row”>
<div class=”w3-col s4″>
<img src=”https://cdn-icons-png.flaticon.com/128/10988/10988139.png” alt=”AI” class=”w3-card-img w3-round”>
</div>
<div class=”w3-col s8″>
<div class=”w3-container w3-indigo”>
<h4><b>Ai Evolution</b></h4>
<p>AI is smart technology that helps people solve problems, learn faster, create ideas, and make life easier. </p>
<button class=”w3-button w3-yellow”>Learn Now</button>
</div>
</div>
</div>
</div>
</body>
</html>
Explanation of a left-aligned image, text, and button in W3.CSS.
- w3-row – This class defines a row layout for text content in the current card block.
- w3-col s4 – This class indicates the width of the image container in the current card block. It takes input from 4 of the 12 column values on small screens.
- w3-col s8 – This class takes input from the text and button container in the current card block.
- w3-card-img w3-round – This class applies a rounded border effect to the image in the current card block, making it display more efficiently.
A card with an image, text, button, and overlay in W3.CSS.
In W3.CSS web development scripts, web developers can also display text or buttons overlayed on top of images for a more visually appealing card block effect. This type of webpage layout structure is often used on websites to display card block element text information, such as blog posts, product or service promotions, or live event announcements, where a user-defined card block image serves as the background.
Example of a card with an image overlay 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 Image Overlay Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
/* here we add custom styles for card block overlay attributes */
.card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div class=”w3-card-4 w3-margin w3-teal w3-round-large w3-display-container”>
<img src=”https://cdn-icons-png.flaticon.com/128/962/962649.png” alt=”AI” class=”w3-card-img-top”>
<div class=”card-overlay”>
<div class=”w3-container w3-text-white”>
<h4><b>What Is AI </b></h4>
<p>E-commerce is the modern way of shopping online, allowing customers to buy products anytime and anywhere. It offers convenience, variety, easy payments, doorstep delivery, and helps businesses reach more customers. </p>
<button class=”w3-button w3-pink”>Explore More About It ?</button>
</div>
</div>
</body>
</html>
Explanation of a card with an image overlay in W3.CSS.
- w3-display-container – In this example, this class allows applying a background to overlay an image added to the card block, while the overlay JavaScript code enables absolute positioning.
- Custom .card-overlay – This class enables an overlay effect on an existing card block, uses a semi-transparent teal background, and centers the card block text and button over the image.
- w3-card-img-top – This class manages that the image card is displayed in the top portion of the current card block, with the overlay effect displayed below it.
