Card
Use cards to group related information in a container.
<sa-card class="py-0 pt-6">
<sa-card-header>
<sa-card-title>Bangkok, Thailand</sa-card-title>
<sa-card-description>
Bangkok is an exhilarating metropolis where ancient, gilded temples stand in vibrant contrast to modern
skyscrapers, world-class street food, and electrifying nightlife.
</sa-card-description>
</sa-card-header>
<sa-card-content class="px-0">
<img
class="rounded-b-xl"
src="https://images.unsplash.com/photo-1563492065599-3520f775eeed?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2274"/>
</sa-card-content>
</sa-card>Usage
<sa-card>
<sa-card-header>
<sa-card-title>...</sa-card-title>
<sa-card-description>...</sa-card-description>
</sa-card-header>
<sa-card-content>
...
</sa-card-content>
<sa-card-footer>...</sa-card-footer>
</sa-card>Examples
Simple text card
<sa-card>
<sa-card-header>
<sa-card-title>24/7 Expert Support</sa-card-title>
<sa-card-description>Immediate assistance for any unexpected changes or emergencies on the road.
</sa-card-description>
</sa-card-header>
<sa-card-content>
<p>Travel with confidence knowing our dedicated global support team is always available via chat or phone to
help manage re-bookings, cancellations, and itinerary adjustments.</p>
</sa-card-content>
</sa-card>With Image
<sa-card>
<sa-card-header>
<sa-card-title>The Standard, Bangkok Mahanakhon</sa-card-title>
<sa-card-description>
The Standard, Bangkok Mahanakhon is a high-energy, vibrant lifestyle hotel located within Bangkok's
iconic, pixelated skyscraper, boasting world-class dining, a stunning terrace pool, and the city's
highest rooftop bar.
</sa-card-description>
</sa-card-header>
<sa-card-content class="px-0">
<img
src="https://images.unsplash.com/photo-1753871485492-0219e325e690?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
</sa-card-content>
<sa-card-footer>
<div class="flex items-center space-x-1">
<div class="flex">
<sa-icon name="star" class="h-6 w-6 fill-yellow-400 text-yellow-400" />
<sa-icon name="star" class="h-6 w-6 fill-yellow-400 text-yellow-400" />
<sa-icon name="star" class="h-6 w-6 fill-yellow-400 text-yellow-400" />
<sa-icon name="star" class="h-6 w-6 fill-yellow-400 text-yellow-400" />
<sa-icon name="star" class="h-6 w-6 fill-yellow-400 text-yellow-400" />
</div>
<span class="text-sm text-muted-foreground">(4.9)</span>
</div>
</sa-card-footer>
</sa-card>Stats Card
<sa-card>
<sa-card-header class="flex flex-row items-center justify-between space-y-0 pb-2">
<sa-card-title class="text-sm font-medium">User Engagement</sa-card-title>
<sa-icon name="trending-up" class="h-4 w-4 text-muted-foreground"/>
</sa-card-header>
<sa-card-content>
<div class="text-2xl font-bold">78,512</div>
<p class="text-xs text-muted-foreground">
+4.5% from Last Month
</p>
</sa-card-content>
</sa-card>