W3.CSS — Cards

Basic Card

<div class="w3-card-4">
    <div class="w3-container">
        <h4>Card Title</h4>
        <p>Card content goes here.</p>
    </div>
</div>

Card with Header and Footer

<div class="w3-card-4">
    <header class="w3-container w3-blue">
        <h4>Card Header</h4>
    </header>
    <div class="w3-container">
        <p>Card body content.</p>
    </div>
    <footer class="w3-container w3-blue">
        <p>Card Footer</p>
    </footer>
</div>

Card with Image

<div class="w3-card-4">
    <img src="image.jpg" alt="Image" style="width:100%">
    <div class="w3-container">
        <h4>Card with Image</h4>
        <p>This card has an image at the top.</p>
    </div>
</div>

Card Styles

<!-- Round corners -->
<div class="w3-card-4 w3-round-large">
    <div class="w3-container">
        <h4>Round Card</h4>
    </div>
</div>

<!-- Shadow -->
<div class="w3-card-4 w3-shadow">
    <div class="w3-container">
        <h4>Shadow Card</h4>
    </div>
</div>

Card Examples

<!-- Product card -->
<div class="w3-card-4" style="width:300px">
    <img src="product.jpg" alt="Product" style="width:100%">
    <div class="w3-container">
        <h4>Product Name</h4>
        <p>Product description goes here.</p>
        <p class="w3-text-green w3-large">$29.99</p>
        <button class="w3-button w3-blue w3-block">Add to Cart</button>
    </div>
</div>

<!-- Profile card -->
<div class="w3-card-4" style="width:300px">
    <img src="avatar.jpg" alt="Avatar" style="width:100%">
    <div class="w3-container w3-center">
        <h4>John Doe</h4>
        <p>Web Developer</p>
        <p><span class="w3-tag w3-blue">HTML</span> <span class="w3-tag w3-green">CSS</span></p>
    </div>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic card with header and footer
2. Adds an image to a card
3. Creates a product card
4. Creates a profile card

Up Next

Next: Learn about W3.CSS Panels.