# Cards API Reference ### Example Usage See Source See Output Header A card with header and footer Input Range Footer Submit Button [code] def ex_card(): return Card( Form(LabelInput("Input"), LabelRange("Range")), header=Div( CardTitle("Header"), P("A card with header and footer",cls=TextPresets.muted_sm)), footer=DivLAligned(Button("Footer Submit Button"))) [/code] See Source See Output #### 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 FastHTMLHTMXWeb Apps Read [code] def ex_card2_wide(): def Tags(cats): return DivLAligned(map(Label, cats)) return Card( DivLAligned( A(Img(src="https://picsum.photos/200/200?random=12", style="width:200px"),href="#"), Div(cls='space-y-3 uk-width-expand')( H4("Creating Custom FastHTML Tags for Markdown Rendering"), P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"), DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted), DivFullySpaced( Tags(["FastHTML", "HTMX", "Web Apps"]), Button("Read", cls=(ButtonT.primary,'h-6'))))), cls=CardT.hover) [/code] See Source See Output #### 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 FastHTMLHTMXWeb Apps Read [code] def ex_card2_tall(): def Tags(cats): return DivLAligned(map(Label, cats)) return Card( Div( A(Img(src="https://picsum.photos/400/200?random=14"), href="#"), Div(cls='space-y-3 uk-width-expand')( H4("Creating Custom FastHTML Tags for Markdown Rendering"), P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"), DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted), DivFullySpaced( Tags(["FastHTML", "HTMX", "Web Apps"]), Button("Read", cls=(ButtonT.primary,'h-6'))))), cls=CardT.hover) [/code] See Source See Output ### Sarah Chen Engineering Lead San Francisco ### James Wilson Senior Developer New York ### Maria Garcia UX Designer London ### Alex Kumar Product Manager Singapore ### Emma Brown DevOps Engineer Toronto ### Marcus Johnson Frontend Developer Berlin [code] def ex_card3(): def team_member(name, role, location="Remote"): return Card( DivLAligned( DiceBearAvatar(name, h=24, w=24), Div(H3(name), P(role))), footer=DivFullySpaced( DivHStacked(UkIcon("map-pin", height=16), P(location)), DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github"))))) team = [ team_member("Sarah Chen", "Engineering Lead", "San Francisco"), team_member("James Wilson", "Senior Developer", "New York"), team_member("Maria Garcia", "UX Designer", "London"), team_member("Alex Kumar", "Product Manager", "Singapore"), team_member("Emma Brown", "DevOps Engineer", "Toronto"), team_member("Marcus Johnson", "Frontend Developer", "Berlin") ] return Grid(*team, cols_sm=1, cols_md=1, cols_lg=2, cols_xl=3) [/code] ### API Reference ### Card Source [code] 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 [/code] > 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 [code] CardTitle(*c, cls=(), **kwargs) [/code] > 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 [code] CardContainer(*c, cls=, **kwargs) -> fastcore.xml.FT [/code] > 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 [code] CardHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > 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 [code] CardBody(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > 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 [code] CardFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > 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