Card

Cards are a common organizing unit for modern user interfaces (UI). At their core, they’re just rectangular containers with borders and padding. However, when utilized properly to group related information, they help users better digest, engage, and navigate through content.

experimental.ui.card_body

experimental.ui.card_body(*args, fillable=True, min_height=None, max_height=None, max_height_full_screen=MISSING, height=None, padding=None, gap=None, fill=True, class_=None, **kwargs)

Card body container

A general container for the "main content" of a card. This component is designed to be provided as direct children to card.

Parameters

*args: TagChild | TagAttrs = ()

Contents to the card’s body. Or tag attributes that are supplied to the resolved Tag object.

fillable: bool = True

Whether or not the card item should be a fillable (i.e. flexbox) container.

min_height: Optional[CssUnit] = None

Any valid CSS length unit. If max_height_full_screen is missing, it is set to max_height.

height: Optional[CssUnit] = None

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

padding: Optional[CssUnit | list[CssUnit]] = None

Padding to use for the body. This can be a numeric vector (which will be interpreted as pixels) or a character vector with valid CSS lengths. The length can be between one and four. If one, then that value will be used for all four sides. If two, then the first value will be used for the top and bottom, while the second value will be used for left and right. If three, then the first will be used for top, the second will be left and right, and the third will be bottom. If four, then the values will be interpreted as top, right, bottom, and left respectively.

gap: Optional[CssUnit] = None

A CSS length unit defining the gap (i.e., spacing) between elements provided to *args. This argument is only applicable when fillable = TRUE.

fill: bool = True

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

class_: Optional[str] = None

Additional CSS classes for the returned Tag.

**kwargs: TagAttrValue = {}

Additional HTML attributes for the returned Tag.

Returns

Type Description
CardItem A CardItem object.

See Also

  • layout_column_wrap for laying out multiple cards (or multiple columns inside a card).
  • card for creating a card component.
  • card_header for creating a header within the card.
  • card_title for creating a title within the card body.
  • card_footer for creating a footer within the card.

experimental.ui.card_title

experimental.ui.card_title(*args, container=tags.h5, **kwargs)

A card title container

card_title creates a general container for the "title" of a card. This component is designed to be provided as a direct child to card.

Parameters

*args: TagChild | TagAttrs = ()

Contents to appear in the card’s title, or tag attributes to pass to the resolved Tag object.

container: TagFunction = tags.h5

Method for the returned Tag object. Defaults to :func:~shiny.ui.tags.h5.

**kwargs: TagAttrValue = {}

Additional HTML attributes for the returned Tag object.

Returns

Type Description
Tagifiable An Tag object.

See Also

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.

experimental.ui.ImgContainer

experimental.ui.ImgContainer()

Wraps the return value of card_image().

Parameters

*args: Tag = ()

The return value of card_image().

Returns

Type Description
Tagifiable A tagifiable object, such as a Tag or CardItem object.

experimental.ui.WrapperCallable

experimental.ui.WrapperCallable()

Wraps children into a CardItem.

Parameters

*args: TagChild = ()

TagChild children to wrap.

Returns

Type Description
CardItem A CardItem object.