Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Cards

Card component examples.

Basic Card

This is a simple card with a title and some text content. Cards are the foundational building blocks of the Alpine Admin interface, providing structure and visual separation.

<div class="card bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-700">
  <h3 class="text-sm font-semibold text-white mb-4">Basic Card</h3>
  <p class="text-gray-300 text-sm leading-relaxed">Your content here.</p>
</div>

Card with Header/Footer

This card demonstrates header and footer sections. The header is separated by a bottom border, and the body contains the main content area.

Card footer — additional info or actions go here.

<div class="card bg-gray-800 rounded-xl shadow-sm border border-gray-700 overflow-hidden">
  <div class="p-5 border-b border-gray-700">
    <h3 class="text-sm font-semibold text-white">Card with Header/Footer</h3>
  </div>
  <div class="p-5">
    <p class="text-gray-300 text-sm leading-relaxed">Body content here.</p>
  </div>
  <div class="p-5 border-t border-gray-700 bg-gray-700/50">
    <p class="text-xs text-gray-500">Card footer &mdash; additional info or actions go here.</p>
  </div>
</div>

Card with Image

Cards can include images or gradient placeholders. The image sits above the card content and blends seamlessly with the rounded corners using overflow-hidden.

<div class="card bg-gray-800 rounded-xl shadow-sm border border-gray-700 overflow-hidden">
  <div class="h-40 bg-gradient-to-br from-alpine-400 to-alpine-500 rounded-t-xl"></div>
  <div class="p-5">
    <h3 class="text-sm font-semibold text-white">Card with Image</h3>
    <p class="text-gray-300 text-sm leading-relaxed mt-2">Card with a gradient image placeholder.</p>
  </div>
</div>

Primary

Blue header card using the Alpine primary color.

Success

Green header card for success states.

Danger

Red header card for danger or warning states.

<!-- Primary variant -->
<div class="card bg-gray-800 rounded-xl shadow-sm border border-gray-700 overflow-hidden">
  <div class="px-5 py-3 bg-alpine-500 text-white">
    <h3 class="text-sm font-semibold">Primary</h3>
  </div>
  <div class="p-5">
    <p class="text-gray-300 text-sm">Blue header card using the Alpine primary color.</p>
  </div>
</div>

<!-- Success variant -->
<div class="card bg-gray-800 rounded-xl shadow-sm border border-gray-700 overflow-hidden">
  <div class="px-5 py-3 bg-green-500 text-white">
    <h3 class="text-sm font-semibold">Success</h3>
  </div>
  <div class="p-5">
    <p class="text-gray-300 text-sm">Green header card for success states.</p>
  </div>
</div>

<!-- Danger variant -->
<div class="card bg-gray-800 rounded-xl shadow-sm border border-gray-700 overflow-hidden">
  <div class="px-5 py-3 bg-red-500 text-white">
    <h3 class="text-sm font-semibold">Danger</h3>
  </div>
  <div class="p-5">
    <p class="text-gray-300 text-sm">Red header card for danger or warning states.</p>
  </div>
</div>

Hover Card 1

Cards already have hover transform built into the .card class.

Hover Card 2

Hovering lifts the card with a shadow and slight upward translation.

Hover Card 3

This provides subtle feedback and makes cards feel interactive.

<div class="card bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-700">
  <h3 class="text-sm font-semibold text-white mb-2">Hover Card</h3>
  <p class="text-gray-400 text-xs">Hover effect with translate and shadow, using .card class.</p>
</div>