cards

controllers/tablerbase.go

@@ -69,6 +69,31 @@ func TablerNavbar(c *core.Context) *core.Response {
 	return c.Response.Template("tabler_default.html", data)
 }
 
+// TablerCards renders a page with card component demos.
+// Uses the composition pattern: embeds TablerPageData and adds Cards.
+func TablerCards(c *core.Context) *core.Response {
+	type cardsPageData struct {
+		TablerPageData
+		Cards []FormtablerCard
+	}
+	data := cardsPageData{
+		TablerPageData: TablerPageData{
+			PageTitle:       "Cards",
+			PageDescription: "Card component demo page",
+			ShowTopbar:      true,
+			Sidebar:         false,
+			PageHeader:      "Cards",
+			PagePretitle:    "Components",
+			UserName:        "Jane Doe",
+			UserRole:        "Administrator",
+			NavbarMenu:      SampleNavbarMenu(),
+			Content:         template.HTML(""),
+		},
+		Cards: SampleCards(),
+	}
+	return c.Response.Template("tabler_cards.html", data)
+}
+
 // TablerFormElements renders a page with all 25 formtabler form components.
 // Uses the composition pattern: embeds TablerPageData and adds
 // a FormElements field containing all form component data.

controllers/tablerdata.go

@@ -44,6 +44,86 @@ func SampleNavbarMenu() TablerMenu {
 	}
 }
 
+// SampleCards returns 6 sample cards showing different variants.
+func SampleCards() []FormtablerCard {
+  defaultBody := &FormtablerCardBody{
+		Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.",
+	}
+	return []FormtablerCard{
+		// 1. Card with header, body text, and footer
+		{
+			Header: &FormtablerCardHeader{Title: "Card with header and footer"},
+			Body:   defaultBody,
+			Footer: &FormtablerCardFooter{Text: "This is standard card footer"},
+		},
+		// 2. Card with image top, status bar, and action button in body
+		{
+			Image:  &FormtablerCardImage{Position: "top", Src: "/public/static/photos/coffee-on-a-table-with-other-items.jpg"},
+			Status: &FormtablerCardStatus{Position: "top", Color: "red"},
+			Body: &FormtablerCardBody{
+				Title:      "Card with image & status",
+				Subtitle:   "Featured card",
+				Text:       "This card has an image at the top, a red status bar, and a call-to-action button.",
+				HasButton:  true,
+				ButtonText: "View details",
+			},
+		},
+		// 3. Card with image bottom, progress bar, and footer with elements
+		{
+			Image: &FormtablerCardImage{Position: "bottom", Src: "/public/static/photos/coffee-on-a-table-with-other-items.jpg"},
+			Body:  defaultBody,
+			Footer: &FormtablerCardFooter{
+				HasSwitch: true,
+				HasMore:   true,
+			},
+			Progress: &FormtablerCardProgress{Percent: 60, Color: "green"},
+		},
+		// 4. Card with header tabs, alert, and footer buttons
+		{
+			Header: &FormtablerCardHeader{
+				UseTabs: true,
+				Tabs: []FormtablerCardTab{
+					{Title: "Active", Active: true, Link: "#"},
+					{Title: "Second", Link: "#"},
+					{Title: "Disabled", Disabled: true, Link: "#"},
+				},
+			},
+			Alert: &FormtablerCardAlert{Text: "This is an alert message inside the card.", Type: "info"},
+			Body:  defaultBody,
+			Footer: &FormtablerCardFooter{
+				ButtonsCancel: "Cancel",
+				ButtonsAction: "Continue",
+			},
+		},
+		// 5. Card with inactive state, no footer
+		{
+			Inactive: true,
+			Header:   &FormtablerCardHeader{Title: "Inactive card"},
+			Body: &FormtablerCardBody{
+				Title: "This card is inactive",
+				Text:  "Inactive cards have reduced opacity. They are useful for showing disabled or expired content.",
+			},
+		},
+		// 6. Card with header pills, footer with avatars, and active state
+		{
+			Active: true,
+			Header: &FormtablerCardHeader{
+				UsePills: true,
+				Pills: []FormtablerCardTab{
+					{Title: "All", Active: true, Link: "#"},
+					{Title: "Active", Link: "#"},
+					{Title: "Completed", Link: "#"},
+				},
+			},
+			Body: defaultBody,
+			Footer: &FormtablerCardFooter{
+				HasCheck:   true,
+				HasAvatars: true,
+			},
+		},
+	}
+}
+
 // SampleFormElements returns sample data for all 25 formtabler components.
 func SampleFormElements() FormtablerFormElementsPage {
 	return FormtablerFormElementsPage{

controllers/tablertypes.go

@@ -304,6 +304,103 @@ type FormtablerValidationStates struct {
 	Lite  bool
 }
 
+// FormtablerCardStatus represents a status bar on the card.
+type FormtablerCardStatus struct {
+	Position string // "top", "bottom", "start"
+	Color    string // "blue", "red", "green", "yellow", etc.
+}
+
+// FormtablerCardHeader represents a card header section.
+type FormtablerCardHeader struct {
+	Title string
+	// Tab-based header
+	UseTabs bool
+	Tabs    []FormtablerCardTab
+	// Pill-based header
+	UsePills bool
+	Pills    []FormtablerCardTab
+}
+
+// FormtablerCardTab represents a single tab/pill in a card header.
+type FormtablerCardTab struct {
+	Title    string
+	Active   bool
+	Disabled bool
+	Link     string
+}
+
+// FormtablerCardAlert represents an alert inside a card.
+type FormtablerCardAlert struct {
+	Text  string
+	Type  string // "success", "info", "warning", "danger"
+}
+
+// FormtablerCardImage represents an image at top or bottom of a card.
+type FormtablerCardImage struct {
+	Position string // "top", "bottom"
+	Src      string
+	Ratio    string // "21x9", "4x3", etc.
+}
+
+// FormtablerCardFooter represents a card footer.
+type FormtablerCardFooter struct {
+	Text string // simple footer text
+	// Single button
+	Button     string
+	ButtonLink string
+	// Two buttons (Cancel / Action)
+	ButtonsCancel string
+	ButtonsAction string
+	ButtonsActionLink string
+	// Elements row (switch, check, avatars, more)
+	HasSwitch bool
+	HasCheck  bool
+	HasAvatars bool
+	HasMore   bool
+}
+
+// FormtablerCardBody represents the body content of a card.
+type FormtablerCardBody struct {
+	Title    string
+	Subtitle string
+	Text     string
+	HasButton bool
+	ButtonText string
+	ButtonLink string
+}
+
+// FormtablerCardProgress represents a progress bar in the card.
+type FormtablerCardProgress struct {
+	Percent int
+	Color   string
+}
+
+// FormtablerCard represents a single card component.
+// All fields are populated by the caller; the template renders based on what it finds.
+type FormtablerCard struct {
+	// Outer attributes
+	Link     string // if set, card is an <a href> instead of <div>
+	Active   bool
+	Inactive bool
+	Class    string
+	// Empty state
+	Empty bool
+	// Image top/bottom
+	Image *FormtablerCardImage
+	// Status bar
+	Status *FormtablerCardStatus
+	// Header
+	Header *FormtablerCardHeader
+	// Alert
+	Alert *FormtablerCardAlert
+	// Body
+	Body *FormtablerCardBody
+	// Footer
+	Footer *FormtablerCardFooter
+	// Progress
+	Progress *FormtablerCardProgress
+}
+
 // FormtablerFormElementsPage is the page-specific struct for the form elements demo.
 // Each field is one of the 25 form element groups.
 type FormtablerFormElementsPage struct {