Card

Container for organizing related content and

TailwindCSS

Create Project

Deploy your new project in one-click.

Name

Service

package showcase

import (
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/card"
	"github.com/axzilla/templui/internal/components/input"
	"github.com/axzilla/templui/internal/components/label"
	"github.com/axzilla/templui/internal/components/selectbox"
)

templ CardDefault() {
	<div class="w-full max-w-sm">
		@card.Card() {
			@card.Header() {
				@card.Title() {
					Create Project
				}
				@card.Description() {
					Deploy your new project in one-click.
				}
			}
			@card.Content() {
				<div class="flex flex-col gap-4">
					<div class="w-full max-w-sm grid gap-2">
						@label.Label(label.Props{
							For: "name",
						}) {
							Name
						}
						@input.Input(input.Props{
							ID:          "name",
							Placeholder: "Enter project name",
						})
					</div>
					<div class="w-full max-w-sm grid gap-2">
						@label.Label(label.Props{
							For: "service",
						}) {
							Service
						}
						@selectbox.SelectBox() {
							@selectbox.Trigger(selectbox.TriggerProps{
								ID: "service",
							}) {
								@selectbox.Value(selectbox.ValueProps{
									Placeholder: "Select",
								})
							}
							@selectbox.Content() {
								@selectbox.Group() {
									@selectbox.Item(selectbox.ItemProps{
										Value: "postgres",
									}) {
										PostgreSQL
									}
									@selectbox.Item(selectbox.ItemProps{
										Value: "mysql",
									}) {
										MySQL
									}
									@selectbox.Item(selectbox.ItemProps{
										Value: "sqlite",
									}) {
										SQLite
									}
								}
							}
						}
					</div>
				</div>
			}
			@card.Footer(card.FooterProps{
				Class: "flex justify-between",
			}) {
				@button.Button(button.Props{
					Variant: button.VariantSecondary,
				}) {
					Cancel
				}
				@button.Button() {
					Deploy
				}
			}
		}
	</div>
}

Installation

templui add card

Examples

Image Left

Side Image Card

With left-aligned image

This card demonstrates the left image layout with lazy loading.

package showcase

import (
	"github.com/axzilla/templui/internal/components/aspectratio"
	"github.com/axzilla/templui/internal/components/card"
)

templ CardImageLeft() {
	<div class="w-full max-w-sm">
		@card.Card() {
			<div class="flex">
				<div class="overflow-hidden shrink-0 rounded-l-lg w-1/3">
					@aspectratio.AspectRatio(aspectratio.Props{
						ID:    "left-media-aspect",
						Ratio: aspectratio.RatioAuto,
						Class: "h-full w-full",
					}) {
						<img
							src="/assets/img/card_placeholder.jpeg"
							alt="Left side image"
							loading="lazy"
							class="h-full w-full object-cover"
						/>
					}
				</div>
				<div class="flex flex-col flex-1">
					@card.Header() {
						@card.Title() {
							Side Image Card
						}
						@card.Description() {
							With left-aligned image
						}
					}
					@card.Content() {
						<p>This card demonstrates the left image layout with lazy loading.</p>
					}
				</div>
			</div>
		}
	</div>
}

Image Right

Side Image Card

With right-aligned image

This card demonstrates the right image layout with lazy loading.

package showcase

import (
	"github.com/axzilla/templui/internal/components/aspectratio"
	"github.com/axzilla/templui/internal/components/card"
)

templ CardImageRight() {
	<div class="w-full max-w-sm">
		@card.Card() {
			<div class="flex">
				<div class="flex flex-col flex-1">
					@card.Header() {
						@card.Title() {
							Side Image Card
						}
						@card.Description() {
							With right-aligned image
						}
					}
					@card.Content() {
						<p>This card demonstrates the right image layout with lazy loading.</p>
					}
				</div>
				<div class="overflow-hidden shrink-0 rounded-r-lg w-1/3">
					@aspectratio.AspectRatio(aspectratio.Props{
						ID:    "right-media-aspect",
						Ratio: aspectratio.RatioAuto,
						Class: "h-full w-full",
					}) {
						<img
							src="/assets/img/card_placeholder.jpeg"
							alt="Right side image"
							loading="lazy"
							class="h-full w-full object-cover"
						/>
					}
				</div>
			</div>
		}
	</div>
}

Image Top

Featured Card

With top image

This card shows top image usage with lazy loading for better performance.

package showcase

import (
	"github.com/axzilla/templui/internal/components/aspectratio"
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/card"
)

templ CardImageTop() {
	<div class="w-full max-w-sm">
		@card.Card() {
			<div class="overflow-hidden w-full rounded-t-lg">
				@aspectratio.AspectRatio(aspectratio.Props{
					ID:    "top-media-aspect",
					Ratio: aspectratio.RatioVideo,
					Class: "h-full w-full",
				}) {
					<img
						src="/assets/img/card_placeholder.jpeg"
						alt="Card image"
						loading="lazy"
						class="h-full w-full object-cover"
					/>
				}
			</div>
			@card.Header() {
				@card.Title() {
					Featured Card
				}
				@card.Description() {
					With top image
				}
			}
			@card.Content() {
				<p>This card shows top image usage with lazy loading for better performance.</p>
			}
			@card.Footer() {
				@button.Button() {
					Learn more
				}
			}
		}
	</div>
}

Image Bottom

Featured Card

With bottom image

This card shows bottom image usage with lazy loading for better performance.

package showcase

import (
	"github.com/axzilla/templui/internal/components/aspectratio"
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/card"
)

templ CardImageBottom() {
	<div class="w-full max-w-sm">
		@card.Card() {
			@card.Header() {
				@card.Title() {
					Featured Card
				}
				@card.Description() {
					With bottom image
				}
			}
			@card.Content() {
				<p>This card shows bottom image usage with lazy loading for better performance.</p>
			}
			@card.Footer() {
				@button.Button() {
					Learn more
				}
			}
			<div class="overflow-hidden w-full rounded-b-lg">
				@aspectratio.AspectRatio(aspectratio.Props{
					ID:    "bottom-media-aspect",
					Ratio: aspectratio.RatioVideo,
					Class: "h-full w-full",
				}) {
					<img
						src="/assets/img/card_placeholder.jpeg"
						alt="Card image"
						loading="lazy"
						class="h-full w-full object-cover"
					/>
				}
			</div>
		}
	</div>
}

API Reference

Required parameter

Hover for description

Card

Main card container component for organizing related content.

Name	Type	Default
`ID` Unique identifier for the card element.	`string`	-
`Class` Additional CSS classes to apply to the card.	`string`	-
`Attributes` Additional HTML attributes to apply to the card element.	`templ.Attributes`	-

Header

Card header section for titles and metadata.

Name	Type	Default
`ID` Unique identifier for the header element.	`string`	-
`Class` Additional CSS classes to apply to the header.	`string`	-
`Attributes` Additional HTML attributes to apply to the header element.	`templ.Attributes`	-

Title

Card title component for the main heading.

Name	Type	Default
`ID` Unique identifier for the title element.	`string`	-
`Class` Additional CSS classes to apply to the title.	`string`	-
`Attributes` Additional HTML attributes to apply to the title element.	`templ.Attributes`	-

Description

Card description component for additional context.

Name	Type	Default
`ID` Unique identifier for the description element.	`string`	-
`Class` Additional CSS classes to apply to the description.	`string`	-
`Attributes` Additional HTML attributes to apply to the description element.	`templ.Attributes`	-

Content

Card content area for the main body.

Name	Type	Default
`ID` Unique identifier for the content element.	`string`	-
`Class` Additional CSS classes to apply to the content.	`string`	-
`Attributes` Additional HTML attributes to apply to the content element.	`templ.Attributes`	-

Footer

Card footer section for actions and additional information.

Name	Type	Default
`ID` Unique identifier for the footer element.	`string`	-
`Class` Additional CSS classes to apply to the footer.	`string`	-
`Attributes` Additional HTML attributes to apply to the footer element.	`templ.Attributes`	-

Getting Started

Components

Card

Create Project

Installation

Examples

Side Image Card

Side Image Card

Featured Card

Featured Card

API Reference

Card

Header

Title

Description

Content

Footer