Card

Additional card components that compliment ui.card.

experimental.ui.card_image

experimental.ui.card_image(
    file,
    *args,
    href=None,
    border_radius='top',
    mime_type=None,
    class_=None,
    height=None,
    fill=True,
    width=None,
    container=card_body,
    **kwargs,
)

A card image container

card_image creates a general container for an image within a card. This component is designed to be provided as a direct child to card.

Parameters

file : str | Path | PurePath | io.BytesIO | None

A file path pointing to an image. The image will be base64 encoded and provided to the src attribute of the <img> tag. Alternatively, you may set this value to None and provide the src yourself via *args:TagAttrs or **kwargs:TagAttrValue (e.g., {"src": "HOSTED_PATH_TO_IMAGE"} or src="HOSTED_PATH_TO_IMAGE").

*args : TagAttrs = ()

A dictionary of tag attributes that are supplied to the resolved Tag object.

href : Optional[str] = None

An optional URL to link to.

border_radius : Literal[‘top’, ‘bottom’, ‘all’, ‘none’] = 'top'

Where to apply border-radius on the image.

mime_type : Optional[str] = None

The mime type of the file.

class_ : Optional[str] = None

Additional CSS classes for the resolved Tag object.

height : Optional[CssUnit] = None

Any valid CSS unit (e.g., height="200px"). height will not apply when a card is made full_screen. In this case, consider setting a height in card_body.

fill : bool = True

Whether to allow this element to grow/shrink to fit its card container.

width : Optional[CssUnit] = None

Any valid CSS unit (e.g., width="100%").

container : ImgContainer = card_body

Method to wrap the returned Tag object. Defaults to card_body. If card_body is used, each image will be in separate cards. If the container method does not return a CardItem, it allows for consecutive non-CardItem objects to be bundled into a single card_body within card.

****kwargs** : TagAttrValue = {}

Additional HTML attributes for the resolved Tag.