CSS EXAMPLE · WORKING REFERENCE

CSS Card Design

Padding, border, radius aur shadow se reusable content card style banao.

Working code

<article class="card">
  <h2>JavaScript</h2>
  <p>Learn JavaScript with practical examples.</p>
  <a href="#">Start Learning</a>
</article>

<style>
.card {
  max-width: 340px;
  padding: 24px;
  background: white;
  border: 1px solid #dce8f5;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(16, 35, 63, 0.08);
}

.card h2 { margin-top: 0; }

.card p {
  color: #607089;
  line-height: 1.6;
}

.card a {
  font-weight: 700;
}
</style>
Run Code ▶

Preview

How it works

Padding content ko breathing space deta hai, border boundary define karta hai aur border-radius corners soften karta hai.

Subtle box-shadow card ko background se visually separate karta hai.

Try Yourself

<article class="card">
  <h2>JavaScript</h2>
  <p>Learn JavaScript with practical examples.</p>
  <a href="#">Start Learning</a>
</article>

<style>
.card {
  max-width: 380px;
  padding: 28px;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
</style>
Try in Playground ▶

Learn this concept

Read related CSS Tutorial →