ui.card

ui.card(
    *args,
    full_screen=False,
    height=None,
    max_height=None,
    min_height=None,
    fill=True,
    class_=None,
    id=None,
    **kwargs,
)

A Bootstrap card component

A general purpose container for grouping related UI elements together with a border and optional padding. To learn more about card()s, see this article.

Parameters

*args : TagChild | TagAttrs | CardItem = (): UI elements.
full_screen : bool = False: If True, an icon will appear when hovering over the card body. Clicking the icon expands the card to fit viewport size.
height : Optional[CssUnit] = None: Any valid CSS unit (e.g., height="200px"). Doesn’t apply when a card is made full_screen.
fill : bool = True: Whether or not to allow the card to grow/shrink to fit a fillable container with an opinionated height (e.g., page_fillable).
class_ : Optional[str] = None: Additional CSS classes for the returned Tag.
id : Optional[str] = None: Provide a unique identifier for the card or to report its full screen state to Shiny. For example, using id="my_card", you can observe the card’s full screen state with input.my_card_full_screen().
****kwargs** : TagAttrValue = {}: HTML attributes on the returned Tag.

Returns

: Tag: An div tag.

Examples

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny import App, ui

app_ui = ui.page_fluid(
    ui.card(
        ui.card_header("This is the header"),
        ui.p("This is the body."),
        ui.p("This is still the body."),
        ui.card_footer("This is the footer"),
        full_screen=True,
    ),
)


app = App(app_ui, server=None)

ui.card

Parameters

Returns

See Also

Examples