Card

Container for organizing related content and

TailwindCSS

package showcase

import "github.com/axzilla/templui/pkg/components"

templ CardDefault() {
	@components.Card(components.CardProps{Class: "max-w-sm"}) {
		@components.CardHeader() {
			@components.CardTitle() {
				Card Title
			}
			@components.CardDescription() {
				Card Description
			}
		}
		@components.CardContent() {
			<p>Card Content</p>
		}
		@components.CardFooter() {
			@components.Button(components.ButtonProps{Text: "Action"})
		}
	}
}

package components

import "github.com/axzilla/templui/pkg/utils"

type CardImagePosition string

const (
	CardImageTop    CardImagePosition = "top"
	CardImageBottom CardImagePosition = "bottom"
	CardImageLeft   CardImagePosition = "left"
	CardImageRight  CardImagePosition = "right"
)

type CardProps struct {
	Horizontal bool             // Enables horizontal layout for side images
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Container for organizing related content and
templ Card(props CardProps) {
	<div
		class={
			utils.TwMerge(
				"w-full rounded-lg border bg-card text-card-foreground shadow-sm",
				props.Class,
			),
			templ.KV("flex overflow-hidden", props.Horizontal),
		}
		{ props.Attributes... }
	>
		{ children... }
	</div>
}

type CardImageProps struct {
	Src         string            // Image URL
	Alt         string            // Image alt text
	Class       string            // Additional CSS classes
	AspectRatio string            // Aspect ratio for image
	Position    CardImagePosition // Image position
	Width       string            // Image width
}

func imageWidth(width string) string {
	if width == "" {
		return "w-1/3"
	}
	return "w-" + width
}

// CardImage renders an image section within the card
templ CardImage(props CardImageProps) {
	<div
		class={
			utils.TwMerge(
				"overflow-hidden",
				props.Class,
			),
			// Border radius based on position
			templ.KV("rounded-t-lg", props.Position == CardImageTop),
			templ.KV("rounded-b-lg", props.Position == CardImageBottom),
			templ.KV("rounded-l-lg", props.Position == CardImageLeft),
			templ.KV("rounded-r-lg", props.Position == CardImageRight),
			// Width for side images
			templ.KV("shrink-0", props.Position == CardImageLeft || props.Position == CardImageRight),
			templ.KV(imageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
		}
		if props.AspectRatio != "" {
			style={ "aspect-ratio: " + props.AspectRatio }
		}
	>
		<img
			src={ props.Src }
			alt={ props.Alt }
			class="h-full w-full object-cover"
		/>
	</div>
}

// CardHeader renders the header section of a card.
templ CardHeader() {
	<div class="flex flex-col space-y-1.5 p-6">
		{ children... }
	</div>
}

// CardTitle renders the title of a card.
templ CardTitle() {
	<h3 class="text-2xl font-semibold leading-none tracking-tight">
		{ children... }
	</h3>
}

// CardDescription renders the description of a card.
templ CardDescription() {
	<p class="text-sm text-muted-foreground">
		{ children... }
	</p>
}

// CardContent renders the main content area of a card.
templ CardContent() {
	<div class="p-6">
		{ children... }
	</div>
}

// CardFooter renders the footer section of a card.
templ CardFooter() {
	<div class="flex items-center p-6 pt-0">
		{ children... }
	</div>
}

Usage

@components.Card(components.CardProps{...})

Examples

With Image Left

package showcase

import "github.com/axzilla/templui/pkg/components"

templ CardWithImageLeft() {
	@components.Card(components.CardProps{
		Horizontal: true,
	}) {
		@components.CardImage(components.CardImageProps{
			Src:      "/assets/img/card_placeholder.jpeg",
			Alt:      "Left side image",
			Position: components.CardImageLeft,
			Width:    "1/3",
		})
		<div class="flex flex-col flex-1">
			@components.CardHeader() {
				@components.CardTitle() {
					Side Image Card
				}
				@components.CardDescription() {
					With left-aligned image
				}
			}
			@components.CardContent() {
				<p>This card demonstrates the left image layout.</p>
			}
		</div>
	}
}

package components

import "github.com/axzilla/templui/pkg/utils"

type CardImagePosition string

const (
	CardImageTop    CardImagePosition = "top"
	CardImageBottom CardImagePosition = "bottom"
	CardImageLeft   CardImagePosition = "left"
	CardImageRight  CardImagePosition = "right"
)

type CardProps struct {
	Horizontal bool             // Enables horizontal layout for side images
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Container for organizing related content and
templ Card(props CardProps) {
	<div
		class={
			utils.TwMerge(
				"w-full rounded-lg border bg-card text-card-foreground shadow-sm",
				props.Class,
			),
			templ.KV("flex overflow-hidden", props.Horizontal),
		}
		{ props.Attributes... }
	>
		{ children... }
	</div>
}

type CardImageProps struct {
	Src         string            // Image URL
	Alt         string            // Image alt text
	Class       string            // Additional CSS classes
	AspectRatio string            // Aspect ratio for image
	Position    CardImagePosition // Image position
	Width       string            // Image width
}

func imageWidth(width string) string {
	if width == "" {
		return "w-1/3"
	}
	return "w-" + width
}

// CardImage renders an image section within the card
templ CardImage(props CardImageProps) {
	<div
		class={
			utils.TwMerge(
				"overflow-hidden",
				props.Class,
			),
			// Border radius based on position
			templ.KV("rounded-t-lg", props.Position == CardImageTop),
			templ.KV("rounded-b-lg", props.Position == CardImageBottom),
			templ.KV("rounded-l-lg", props.Position == CardImageLeft),
			templ.KV("rounded-r-lg", props.Position == CardImageRight),
			// Width for side images
			templ.KV("shrink-0", props.Position == CardImageLeft || props.Position == CardImageRight),
			templ.KV(imageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
		}
		if props.AspectRatio != "" {
			style={ "aspect-ratio: " + props.AspectRatio }
		}
	>
		<img
			src={ props.Src }
			alt={ props.Alt }
			class="h-full w-full object-cover"
		/>
	</div>
}

// CardHeader renders the header section of a card.
templ CardHeader() {
	<div class="flex flex-col space-y-1.5 p-6">
		{ children... }
	</div>
}

// CardTitle renders the title of a card.
templ CardTitle() {
	<h3 class="text-2xl font-semibold leading-none tracking-tight">
		{ children... }
	</h3>
}

// CardDescription renders the description of a card.
templ CardDescription() {
	<p class="text-sm text-muted-foreground">
		{ children... }
	</p>
}

// CardContent renders the main content area of a card.
templ CardContent() {
	<div class="p-6">
		{ children... }
	</div>
}

// CardFooter renders the footer section of a card.
templ CardFooter() {
	<div class="flex items-center p-6 pt-0">
		{ children... }
	</div>
}

With Image Right

package showcase

import "github.com/axzilla/templui/pkg/components"

templ CardWithImageRight() {
	@components.Card(components.CardProps{
		Horizontal: true,
	}) {
		<div class="flex flex-col flex-1">
			@components.CardHeader() {
				@components.CardTitle() {
					Side Image Card
				}
				@components.CardDescription() {
					With right-aligned image
				}
			}
			@components.CardContent() {
				<p>This card demonstrates the right image layout.</p>
			}
		</div>
		@components.CardImage(components.CardImageProps{
			Src:      "/assets/img/card_placeholder.jpeg",
			Alt:      "Right side image",
			Position: components.CardImageRight,
		})
	}
}

package components

import "github.com/axzilla/templui/pkg/utils"

type CardImagePosition string

const (
	CardImageTop    CardImagePosition = "top"
	CardImageBottom CardImagePosition = "bottom"
	CardImageLeft   CardImagePosition = "left"
	CardImageRight  CardImagePosition = "right"
)

type CardProps struct {
	Horizontal bool             // Enables horizontal layout for side images
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Container for organizing related content and
templ Card(props CardProps) {
	<div
		class={
			utils.TwMerge(
				"w-full rounded-lg border bg-card text-card-foreground shadow-sm",
				props.Class,
			),
			templ.KV("flex overflow-hidden", props.Horizontal),
		}
		{ props.Attributes... }
	>
		{ children... }
	</div>
}

type CardImageProps struct {
	Src         string            // Image URL
	Alt         string            // Image alt text
	Class       string            // Additional CSS classes
	AspectRatio string            // Aspect ratio for image
	Position    CardImagePosition // Image position
	Width       string            // Image width
}

func imageWidth(width string) string {
	if width == "" {
		return "w-1/3"
	}
	return "w-" + width
}

// CardImage renders an image section within the card
templ CardImage(props CardImageProps) {
	<div
		class={
			utils.TwMerge(
				"overflow-hidden",
				props.Class,
			),
			// Border radius based on position
			templ.KV("rounded-t-lg", props.Position == CardImageTop),
			templ.KV("rounded-b-lg", props.Position == CardImageBottom),
			templ.KV("rounded-l-lg", props.Position == CardImageLeft),
			templ.KV("rounded-r-lg", props.Position == CardImageRight),
			// Width for side images
			templ.KV("shrink-0", props.Position == CardImageLeft || props.Position == CardImageRight),
			templ.KV(imageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
		}
		if props.AspectRatio != "" {
			style={ "aspect-ratio: " + props.AspectRatio }
		}
	>
		<img
			src={ props.Src }
			alt={ props.Alt }
			class="h-full w-full object-cover"
		/>
	</div>
}

// CardHeader renders the header section of a card.
templ CardHeader() {
	<div class="flex flex-col space-y-1.5 p-6">
		{ children... }
	</div>
}

// CardTitle renders the title of a card.
templ CardTitle() {
	<h3 class="text-2xl font-semibold leading-none tracking-tight">
		{ children... }
	</h3>
}

// CardDescription renders the description of a card.
templ CardDescription() {
	<p class="text-sm text-muted-foreground">
		{ children... }
	</p>
}

// CardContent renders the main content area of a card.
templ CardContent() {
	<div class="p-6">
		{ children... }
	</div>
}

// CardFooter renders the footer section of a card.
templ CardFooter() {
	<div class="flex items-center p-6 pt-0">
		{ children... }
	</div>
}

With Image Top

package showcase

import "github.com/axzilla/templui/pkg/components"

templ CardWithImageTop() {
	@components.Card(components.CardProps{Class: "w-2/3"}) {
		@components.CardImage(components.CardImageProps{
			Src:         "/assets/img/card_placeholder.jpeg",
			Alt:         "Card image",
			Position:    components.CardImageTop,
			AspectRatio: "16/9",
		})
		@components.CardHeader() {
			@components.CardTitle() {
				Featured Card
			}
			@components.CardDescription() {
				With top image
			}
		}
		@components.CardContent() {
			<p>This card shows top image usage.</p>
		}
		@components.CardFooter() {
			@components.Button(components.ButtonProps{Text: "Learn More"})
		}
	}
}

package components

import "github.com/axzilla/templui/pkg/utils"

type CardImagePosition string

const (
	CardImageTop    CardImagePosition = "top"
	CardImageBottom CardImagePosition = "bottom"
	CardImageLeft   CardImagePosition = "left"
	CardImageRight  CardImagePosition = "right"
)

type CardProps struct {
	Horizontal bool             // Enables horizontal layout for side images
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Container for organizing related content and
templ Card(props CardProps) {
	<div
		class={
			utils.TwMerge(
				"w-full rounded-lg border bg-card text-card-foreground shadow-sm",
				props.Class,
			),
			templ.KV("flex overflow-hidden", props.Horizontal),
		}
		{ props.Attributes... }
	>
		{ children... }
	</div>
}

type CardImageProps struct {
	Src         string            // Image URL
	Alt         string            // Image alt text
	Class       string            // Additional CSS classes
	AspectRatio string            // Aspect ratio for image
	Position    CardImagePosition // Image position
	Width       string            // Image width
}

func imageWidth(width string) string {
	if width == "" {
		return "w-1/3"
	}
	return "w-" + width
}

// CardImage renders an image section within the card
templ CardImage(props CardImageProps) {
	<div
		class={
			utils.TwMerge(
				"overflow-hidden",
				props.Class,
			),
			// Border radius based on position
			templ.KV("rounded-t-lg", props.Position == CardImageTop),
			templ.KV("rounded-b-lg", props.Position == CardImageBottom),
			templ.KV("rounded-l-lg", props.Position == CardImageLeft),
			templ.KV("rounded-r-lg", props.Position == CardImageRight),
			// Width for side images
			templ.KV("shrink-0", props.Position == CardImageLeft || props.Position == CardImageRight),
			templ.KV(imageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
		}
		if props.AspectRatio != "" {
			style={ "aspect-ratio: " + props.AspectRatio }
		}
	>
		<img
			src={ props.Src }
			alt={ props.Alt }
			class="h-full w-full object-cover"
		/>
	</div>
}

// CardHeader renders the header section of a card.
templ CardHeader() {
	<div class="flex flex-col space-y-1.5 p-6">
		{ children... }
	</div>
}

// CardTitle renders the title of a card.
templ CardTitle() {
	<h3 class="text-2xl font-semibold leading-none tracking-tight">
		{ children... }
	</h3>
}

// CardDescription renders the description of a card.
templ CardDescription() {
	<p class="text-sm text-muted-foreground">
		{ children... }
	</p>
}

// CardContent renders the main content area of a card.
templ CardContent() {
	<div class="p-6">
		{ children... }
	</div>
}

// CardFooter renders the footer section of a card.
templ CardFooter() {
	<div class="flex items-center p-6 pt-0">
		{ children... }
	</div>
}

With Image Bottom

package showcase

import "github.com/axzilla/templui/pkg/components"

templ CardWithImageBottom() {
	@components.Card(components.CardProps{Class: "w-2/3"}) {
		@components.CardHeader() {
			@components.CardTitle() {
				Featured Card
			}
			@components.CardDescription() {
				With top image
			}
		}
		@components.CardContent() {
			<p>This card shows top image usage.</p>
		}
		@components.CardFooter() {
			@components.Button(components.ButtonProps{Text: "Learn More"})
		}
		@components.CardImage(components.CardImageProps{
			Src:         "/assets/img/card_placeholder.jpeg",
			Alt:         "Card image",
			Position:    components.CardImageBottom,
			AspectRatio: "16/9",
		})
	}
}

package components

import "github.com/axzilla/templui/pkg/utils"

type CardImagePosition string

const (
	CardImageTop    CardImagePosition = "top"
	CardImageBottom CardImagePosition = "bottom"
	CardImageLeft   CardImagePosition = "left"
	CardImageRight  CardImagePosition = "right"
)

type CardProps struct {
	Horizontal bool             // Enables horizontal layout for side images
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Container for organizing related content and
templ Card(props CardProps) {
	<div
		class={
			utils.TwMerge(
				"w-full rounded-lg border bg-card text-card-foreground shadow-sm",
				props.Class,
			),
			templ.KV("flex overflow-hidden", props.Horizontal),
		}
		{ props.Attributes... }
	>
		{ children... }
	</div>
}

type CardImageProps struct {
	Src         string            // Image URL
	Alt         string            // Image alt text
	Class       string            // Additional CSS classes
	AspectRatio string            // Aspect ratio for image
	Position    CardImagePosition // Image position
	Width       string            // Image width
}

func imageWidth(width string) string {
	if width == "" {
		return "w-1/3"
	}
	return "w-" + width
}

// CardImage renders an image section within the card
templ CardImage(props CardImageProps) {
	<div
		class={
			utils.TwMerge(
				"overflow-hidden",
				props.Class,
			),
			// Border radius based on position
			templ.KV("rounded-t-lg", props.Position == CardImageTop),
			templ.KV("rounded-b-lg", props.Position == CardImageBottom),
			templ.KV("rounded-l-lg", props.Position == CardImageLeft),
			templ.KV("rounded-r-lg", props.Position == CardImageRight),
			// Width for side images
			templ.KV("shrink-0", props.Position == CardImageLeft || props.Position == CardImageRight),
			templ.KV(imageWidth(props.Width), props.Position == CardImageLeft || props.Position == CardImageRight),
		}
		if props.AspectRatio != "" {
			style={ "aspect-ratio: " + props.AspectRatio }
		}
	>
		<img
			src={ props.Src }
			alt={ props.Alt }
			class="h-full w-full object-cover"
		/>
	</div>
}

// CardHeader renders the header section of a card.
templ CardHeader() {
	<div class="flex flex-col space-y-1.5 p-6">
		{ children... }
	</div>
}

// CardTitle renders the title of a card.
templ CardTitle() {
	<h3 class="text-2xl font-semibold leading-none tracking-tight">
		{ children... }
	</h3>
}

// CardDescription renders the description of a card.
templ CardDescription() {
	<p class="text-sm text-muted-foreground">
		{ children... }
	</p>
}

// CardContent renders the main content area of a card.
templ CardContent() {
	<div class="p-6">
		{ children... }
	</div>
}

// CardFooter renders the footer section of a card.
templ CardFooter() {
	<div class="flex items-center p-6 pt-0">
		{ children... }
	</div>
}

Getting Started

Components

Card

Card Title

Usage

Examples

Side Image Card

Side Image Card

Featured Card

Featured Card