cards

W3.CSS Cards

W3.CSS Cards

Cards in W3.CSS are used to create organized content blocks with borders and padding. The w3-card class automatically styles a block as a card.

Basic Card Example

<div class="w3-card w3-padding">
  <h3>Card Header</h3>
  <p>This is a simple card with padding.</p>
</div>

Card with Image

You can add an image to your card using the w3-image class:

<div class="w3-card w3-padding">
  <img src="example.jpg" class="w3-image" alt="Card Image">
  <p>This card contains an image.</p>
</div>