Card

Card groups related content in one bordered surface.

github.com/fastygo/templ/components

Summary

Card groups related content in one bordered surface.Card uses header, content, and footer slots.

Use Cases

Show a form inside a panel

Show KPI metrics in a dashboard block

Show article preview with title and actions

Semantics

Card root element is resolved from Tag

CardTitle maps Order to h1, h2, or h3

CardDescription renders a p element

Card parts compose in document order

Example variant.default

Card title

Short supporting text.

Main card body.

import "github.com/fastygo/templ/ui"
import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "default"}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 2}, "Card title")
			@cmp.CardDescription(cmp.CardDescriptionProps{}, "Short supporting text.")
		}
		@cmp.CardContent(cmp.CardContentProps{}) {
			@ui.Text(ui.TextProps{}, "Main card body.")
		}
		@cmp.CardFooter(cmp.CardFooterProps{}) {
			@ui.Button(ui.ButtonProps{Variant: "outline", Size: "sm"}) {
				Action
			}
		}
	}
}

import "github.com/fastygo/templ/ui"
import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "default"}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 2}, "Card title")
			@cmp.CardDescription(cmp.CardDescriptionProps{}, "Short supporting text.")
		}
		@cmp.CardContent(cmp.CardContentProps{}) {
			@ui.Text(ui.TextProps{}, "Main card body.")
		}
		@cmp.CardFooter(cmp.CardFooterProps{}) {
			@ui.Button(ui.ButtonProps{Variant: "outline", Size: "sm"}) {
				Action
			}
		}
	}
}

Example variant.raised

Raised surface

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "raised"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Raised surface
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "raised"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Raised surface
		}
	}
}

Example variant.kpi

Revenue

$12,450

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "kpi"}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 2}, "Revenue")
		}
		@cmp.CardContent(cmp.CardContentProps{}) {
			$12,450
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "kpi"}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 2}, "Revenue")
		}
		@cmp.CardContent(cmp.CardContentProps{}) {
			$12,450
		}
	}
}

Example variant.muted

Muted surface

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "muted"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Muted surface
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "muted"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Muted surface
		}
	}
}

Example variant.ghost

Ghost dashed border

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "ghost"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Ghost dashed border
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "ghost"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Ghost dashed border
		}
	}
}

Example variant.compact

Compact padding

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "compact"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Compact padding
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "compact"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Compact padding
		}
	}
}

Example variant.flat

Flat no shadow

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "flat"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Flat no shadow
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "flat"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Flat no shadow
		}
	}
}

Example variant.accent

Accent highlight

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "accent"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Accent highlight
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{Variant: "accent"}) {
		@cmp.CardContent(cmp.CardContentProps{}) {
			Accent highlight
		}
	}
}

Example layout.header-only

Title only

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 2}, "Title only")
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 2}, "Title only")
		}
	}
}

Example title.order-h3

Nested section title

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 3}, "Nested section title")
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Card(cmp.CardProps{}) {
		@cmp.CardHeader(cmp.CardHeaderProps{}) {
			@cmp.CardTitle(cmp.CardTitleProps{Order: 3}, "Nested section title")
		}
	}
}

API

Attrs · templ.Attributes — role: html-attrs

Class · string — role: style-extension

Order · int — role: heading-level