Cards API Reference

Example Usage

Header

A card with header and footer

Creating Custom FastHTML Tags for Markdown Rendering

A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles

Isaac Flath20-October-2024

Creating Custom FastHTML Tags for Markdown Rendering

A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles

Isaac Flath20-October-2024
Avatar

Sarah Chen

Engineering Lead

Avatar

James Wilson

Senior Developer

Avatar

Maria Garcia

UX Designer

Avatar

Alex Kumar

Product Manager

Avatar

Emma Brown

DevOps Engineer

Avatar

Marcus Johnson

Frontend Developer

API Reference

Card

Source
Card(*c, header: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, footer: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, body_cls='space-y-6', header_cls=(), footer_cls=(), cls=(), **kwargs) -> fastcore.xml.FT

Creates a Card with a header, body, and footer

Params
  • c Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.)

  • header Component(s) that goes in the header (often a ModalTitle and a subtitle)

  • footer Component(s) that goes in the footer (often a ModalCloseButton)

  • body_cls classes for the body

  • header_cls classes for the header

  • footer_cls classes for the footer

  • cls class for outermost component

  • kwargs

Returns: Card component

CardTitle

Source
CardTitle(*c, cls=(), **kwargs)

Creates a card title

Params
  • c Components (often a string)

  • cls Additional classes on the div

  • kwargs


CardT

Card styles from UIkit

Option Value Option Value
default uk-card-default primary uk-card-primary
secondary uk-card-secondary destructive uk-card-destructive
hover uk-card hover:shadow-lg hover:-translate-y-1 transition-all duration-200

The remainder of these are only needed if you're doing something really special. They are used in the `Card` function to generate the boilerplate for you.

CardContainer

Source
CardContainer(*c, cls=<CardT.default: 'uk-card-default'>, **kwargs) -> fastcore.xml.FT

Creates a card container

Params
  • c Components (typically CardHeader, CardBody, CardFooter)

  • cls Additional classes on the div

  • kwargs

Returns: Container for a card

CardHeader

Source
CardHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a card header

Params
  • c Components that goes in the header (often a ModalTitle and description)

  • cls Additional classes on the div

  • kwargs

Returns: Container for the header of a card

CardBody

Source
CardBody(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a card body

Params
  • c Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.)

  • cls Additional classes on the div

  • kwargs

Returns: Container for the body of a card

CardFooter

Source
CardFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT

Creates a card footer

Params
  • c Components that go in the footer (often a ModalCloseButton)

  • cls Additional classes on the div

  • kwargs

Returns: Container for the footer of a card