Card

A flexible container that groups related content and actions — products, articles, testimonials, pricing, and more.

Default Rendered example

Features

Penguai can teach you Javascript

Learning JavaScript doesn't need to be difficult. Our penguin AI robot can learn how much you know and will go at your speed.

Usage Example

@card.Card(card.Config{
    Image:       "/assets/images/cards/card-img-1.webp",
    ImageAlt:    "A penguin robot talking with a human",
    Tag:         "Features",
    Title:       "Penguai can teach you Javascript",
    Description: "Learning JavaScript doesn't need to be difficult...",
})

Card with Button

Pass any templ.Component as Footer to add actions below the body.

Card with Button Rendered example

Mediterranean Escape

Relax under the sun, savor delicious cuisine, and create memories that last a lifetime. Book your getaway now.

Card with Button

@card.Card(card.Config{
    Image:       "/assets/images/cards/card-img-2.webp",
    Title:       "Mediterranean Escape",
    Description: "Relax under the sun and savor delicious cuisine.",
    Footer:      bookNowButton(),
})

templ bookNowButton() {
    <div class="mt-2">
        @button.Button() { Book Now }
    </div>
}

Arbitrary Body

Pass a templ.Component as Body for lists, activity, metadata, or any application-owned content between Description and Footer.

Arbitrary Body Rendered example

Recent activity

Changes from the last 24 hours.

Server-rendered activity 2m ago
Policy updated 18m ago

Arbitrary Body

@card.Card(card.Config{
    Title:       "Recent activity",
    Description: "Changes from the last 24 hours.",
    Body:        activityList(),
    Footer:      activityFooter(),
			})

Pressed Card with Custom Media

Use InteractionPressed for whole-card links that should feel physically pressable. Media accepts any templ component, so project art can cross card regions without turning the Card API into an image-layout DSL.

Pressed Card with Custom Media Rendered example

Go UI

Atlas

Server-rendered interfaces for durable applications.

Pressed Card with Custom Media

<a href="/projects/atlas" aria-label="Explore Atlas">
    @card.Card(card.Config{
        Media:       projectPreview(),
        MediaClass:  "h-64",
        Tag:         "Go UI",
        Title:       "Atlas",
        Description: "Server-rendered interfaces for durable applications.",
        Interaction: card.InteractionPressed,
    })
</a>

Horizontal Layout

Set Layout: card.LayoutHorizontal to place the image beside the content instead of above it.

Horizontal Layout Rendered example

Artificial Intelligence

AI-Powered VR Goggles Redefine Reality

Experience the next level of augmented reality with smart goggles integrating cutting-edge AI for seamless interaction with the world around you.

Horizontal Layout

@card.Card(card.Config{
    Layout:      card.LayoutHorizontal,
    Image:       "/assets/images/cards/card-img-4.webp",
    Tag:         "Artificial Intelligence",
    Title:       "AI-Powered VR Goggles Redefine Reality",
    Description: "Experience the next level of augmented reality...",
})

Product Card

An e-commerce recipe: compose a bordered article with rating.RatingDisplay, a price, and an Add to Cart button. Price and rating are application content, not Card config fields.

Product Card Rendered example

CASIO G-SHOCK GA2100

$99.99

The Casio G-Shock GA2100 is simply designed for easy timekeeping, featuring a sleek profile and clear display.

Product Card

<article class="group flex rounded-radius max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt ...">
    <div class="h-44 md:h-64 overflow-hidden">
        <img src="/assets/images/cards/card-img-3.webp" alt="CASIO G-SHOCK GA2100" />
    </div>
    <div class="flex flex-col gap-4 p-6">
        <h3 class="text-lg font-bold">CASIO G-SHOCK GA2100</h3>
        @rating.RatingDisplay(rating.DisplayConfig{Value: 3, Size: rating.SizeSM, Label: "Rated 3 stars"})
        <span class="text-xl font-medium">$99.99</span>
        @button.Button() { Add to Cart }
    </div>
</article>

Pricing Card

A pricing recipe using the primary border accent and a full-width CTA. Composed as a custom article.

Pricing Card Rendered example

TOP CHOICE

Premium

Best tools for productivity

$8.99 Per month

Features

Unlimited access to all courses
Personalized learning plan
Offline viewing
No ads
High quality video
Cancel anytime

Pricing Card

<article class="group flex rounded-radius max-w-xs flex-col overflow-hidden border-2 border-primary bg-surface-alt p-6 ...">
    <span class="ml-auto w-fit rounded-radius bg-primary px-2 py-1 text-xs text-on-primary">TOP CHOICE</span>
    <h3 class="text-xl font-bold">Premium</h3>
    <span class="mt-8 text-3xl font-medium">$8.99</span>
    <ul class="mt-4 list-inside list-disc space-y-2 text-sm">...</ul>
    @button.Button(button.WithRootClass("w-full")) { Start your free trial }
</article>

Testimonial Card

A quote recipe pairing a person, role, and rating.RatingDisplay in the footer row.

Testimonial Card Rendered example

Simply put, this software transformed my workflow! Its intuitive interface and powerful features make tasks a breeze. A game-changer for productivity!

Bob Johnson

CEO - TechNova

Testimonial Card

<article class="group rounded-radius flex max-w-md flex-col border border-outline bg-surface-alt p-6 ...">
    <svg class="size-12">...</svg>
    <p class="mt-2 text-sm">Simply put, this software transformed my workflow!...</p>
    <div class="flex mt-8 justify-between gap-6">
        <div class="flex items-center gap-2">
            <img src="/assets/images/avatars/avatar-1.webp" class="size-10 rounded-full" alt="Bob Johnson" />
            <div><h3 class="font-bold">Bob Johnson</h3><span class="text-xs">CEO - TechNova</span></div>
        </div>
        @rating.RatingDisplay(rating.DisplayConfig{Value: 4, Size: rating.SizeSM, Label: "Rated 4 stars"})
    </div>
</article>

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/card

Open v0.2.7 API

Banner Carousel