animaltrack/docs/vendor/monsterui/api_ref/docs_cards.md

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=<CardT.default: 'uk-card-default'>, **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