Card

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

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.

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(button.Config{Variant: button.Primary, Type: "button"}) { Book Now }
    </div>
}

Horizontal Layout

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

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 card.StarRating, a price, and an Add to Cart button. (Config.Price/Rating are exposed but rendered by the caller, not the base template.)

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>
        @card.StarRating(3)
        <span class="text-xl font-medium">$99.99</span>
        @button.Button(button.Config{Variant: button.Primary}) { 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.

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.Config{Variant: button.Primary, RootClass: "w-full"}) { Start your free trial }
</article>

Testimonial Card

A quote recipe pairing a person, role, and card.StarRating in the footer row.

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>
        @card.StarRating(4)
    </div>
</article>

API Reference

Prop	Type	Default	Description
`Image`	`string`	`""`	Card image URL (rendered above the body, or beside it in horizontal layout).
`ImageAlt`	`string`	`""`	Alt text for the image.
`Tag`	`string`	`""`	Optional category/tag shown above the title.
`Title`	`string`	`""`	Card title (also seeds the aria-describedby id).
`Description`	`string`	`""`	Body text.
`Footer`	`templ.Component`	`nil`	Optional footer content (buttons, links, ratings) rendered below the body.
`Variant`	`Variant`	`Default`	Style: "default" or "primary" (adds a 2px primary border accent).
`Layout`	`Layout`	`LayoutVertical`	Layout: "vertical" (image top) or "horizontal" (image beside content).
`Price`	`string`	`""`	Exposed for ecommerce recipes; render via a custom Footer (base template does not emit it).
`Rating`	`int`	`0`	Exposed for ecommerce recipes; render with card.StarRating in a Footer.
`RootClass`	`string`	`""`	Extra classes appended to the article container.

Banner Carousel