Card

View Original

A card is a flexible container that groups related content and actions. Used for displaying products, articles, testimonials, and more.

Goshtoso Component

Go + Templ

Default Card

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.

Card with Button

Mediterranean Escape

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

Horizontal Layout

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.

Product Card

CASIO G-SHOCK GA2100

$99.99

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

Pricing Card

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

Testimonial Card

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

Usage Example

// Simple Card
@card.Card(card.Config{
    Image:       "https://example.com/image.jpg",
    ImageAlt:    "Description",
    Tag:         "Features",
    Title:       "Card Title",
    Description: "Card description text...",
})

// Card with Button
@card.Card(card.Config{
    Image:       "https://example.com/image.jpg",
    Title:       "Mediterranean Escape",
    Description: "Relax under the sun and savor delicious cuisine",
    Footer:      bookButton(),
})

// Horizontal Layout Card
@card.Card(card.Config{
    Layout:      card.LayoutHorizontal,
    Image:       "https://example.com/image.jpg",
    Title:       "AI-Powered VR Goggles",
    Description: "Experience the next level of augmented reality",
})

// E-commerce Product Card
@card.Card(card.Config{
    Image:       "product.jpg",
    Title:       "Product Name",
    Description: "Product description",
    Price:       "$99.99",
    Rating:      4,
})

// Testimonial Card
@card.Card(card.Config{
    Title:       "Testimonial",
    Description: "Quote text...",
    Footer:      testimonialFooter(),
})

// Pricing Card (Primary variant)
@card.Card(card.Config{
    Variant:     card.Primary,
    Title:       "Premium",
    Description: "Best tools for productivity",
    Footer:      pricingFooter(),
})

Banner Carousel