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 tomax_height
. height: Optional[CssUnit] = None
-
Any valid CSS unit (e.g.,
height="200px"
). Doesn’t apply when a card is madefull_screen
(in this case, consider setting aheight
incard_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 whenfillable = 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
- card for creating a card component.
- card_header for creating a header within a card.
- card_body for putting content inside a card.
- card_footer for creating a footer within a card.
- card_image for adding an image to a 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 toNone
and provide thesrc
yourself via*args:TagAttrs
or**kwargs:TagAttrValue
(e.g.,{"src": "HOSTED_PATH_TO_IMAGE"}
orsrc="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 madefull_screen
. In this case, consider setting aheight
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. |