Cards API Reference

Example Usage

Header

A card with header and footer

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")))

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

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)

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

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)

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

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)

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