StellarAdmin

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>