HtmlForgeX

Cards

Cards are the primary content container in the Tabler UI kit.

Basic Card

page.Card(card => {
    card.Header(header => header.Title("Card Title"));
    card.Body(body => body.Text("Card content"));
});

Card Variants

Mini Card

new TablerCardMini()
    .Title("Revenue")
    .Subtitle("$45,200")
    .BackgroundColor(TablerColor.Green)
    .Avatar(TablerIconType.ChartBar);

Full Card

new TablerCard()
    .Header(header => {
        header.Title("Dashboard");
        header.WithActions(actions => {
            actions.Button("Export", button => button.Link("/export"));
        });
    })
    .Body(body => {
        body.Text("Dashboard content goes here.");
    })
    .Footer(footer => {
        footer.SetContent("Last updated: today");
    });

Card Features

  • Title — Header text
  • Actions — Header buttons/links
  • Footer — Bottom content area
  • Status — Color indicator bar
  • Badge — Corner badge/counter
  • Stacked — Overlapping card effect

API Reference