Cards API Reference
Example Usage
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")))
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)
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
James Wilson
Senior Developer
Maria Garcia
UX Designer
Alex Kumar
Product Manager
Emma Brown
DevOps Engineer
Marcus Johnson
Frontend Developer
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
SourceCard(*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
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 aModalTitle
and a subtitle)footer
Component(s) that goes in the footer (often aModalCloseButton
)body_cls
classes for the bodyheader_cls
classes for the headerfooter_cls
classes for the footercls
class for outermost componentkwargs
Returns: Card component
CardTitle
SourceCardTitle(*c, cls=(), **kwargs)
Creates a card title
c
Components (often a string)cls
Additional classes on the divkwargs
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
SourceCardContainer(*c, cls=<CardT.default: 'uk-card-default'>, **kwargs) -> fastcore.xml.FT
Creates a card container
c
Components (typicallyCardHeader
,CardBody
,CardFooter
)cls
Additional classes on the divkwargs
Returns: Container for a card
CardHeader
SourceCardHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT
Creates a card header
c
Components that goes in the header (often aModalTitle
and description)cls
Additional classes on the divkwargs
Returns: Container for the header of a card
CardBody
SourceCardBody(*c, cls=(), **kwargs) -> fastcore.xml.FT
Creates a card body
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 divkwargs
Returns: Container for the body of a card
CardFooter
SourceCardFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT
Creates a card footer
c
Components that go in the footer (often aModalCloseButton
)cls
Additional classes on the divkwargs
Returns: Container for the footer of a card