W3.CSS Cards

John

Architect and engineer

Header

Some text.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

W3.CSS Card Classes

W3.CSS provides the following classes for displaying paper-like cards:

Class	Defines
w3-card	Same as w3-card-2
w3-card-2	Container for any HTML content (2px bordered shadow)
w3-card-4	Container for any HTML content (4px bordered shadow)

Colored Cards

To display colored cards, just add w3-color class:

w3-card

w3-card-2

w3-card-4

Example (White Cards)

Try It Yourself »

Example (Yellow Cards)

Try It Yourself »

Card Content

Header

Add containers inside the card to create different sections:

Example

<div class="w3-card-4">

<header class="w3-container w3-blue">
<h1>Header</h1>
</header>

<div class="w3-container">
<p>Lorem ipsum...</p>
</div>

<footer class="w3-container w3-blue">
<h5>Footer</h5>
</footer>

</div>

Try It Yourself »

Photo Card

The Italian / Austrian Alps

Example

<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>The Italian / Austrian Alps</p>
</div>
</div>

Try It Yourself »

Hover Effect

The w3-hover-shadow class adds a shadow effect on hover - this will make any element look like a card on mouse-over (same style as w3-card-4).

Hover over me!

Example

<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over me!</p>
</div>

Try It Yourself »

More Examples

Friend Request

John Doe

Example

<div class="w3-card-4 w3-dark-grey">

<div class="w3-container w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>

<button class="w3-button w3-green">Accept</button>
<button class="w3-button w3-red">Decline</button>
</div>

</div>

Try It Yourself »

John Doe

1 new friend request

CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.

Example

<div class="w3-card-4">

<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>

<div class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>

<button class="w3-button w3-block w3-dark-grey">+ Connect</button>

</div>

Try It Yourself »

Weather Widget

LONDON 60° F

MON

TUE

WED

Example

<div class="w3-card-4">
<div class="w3-display-container w3-text-white">
    <img src="img_london.jpg" alt="Lights" style="width:100%">
    <div class="w3-xlarge w3-display-bottomleft w3-padding">LONDON 60° F</div>
</div>
<div class="w3-row">
    <div class="w3-third w3-center">
      <h3>MON</h3>
      <img src="img_weather_sun.jpg" alt="sun">
    </div>
    <div class="w3-third w3-center">
      <h3>TUE</h3>
      <img src="img_weather_cloud.jpg" alt="cloud">
    </div>
    <div class="w3-third w3-center w3-margin-bottom">
      <h3>WED</h3>
      <img src="img_weather_clouds.jpg" alt="clouds">
    </div>
</div>
</div>

Try It Yourself »

❮ Previous Next ❯