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.