express.ui.card

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

Context manager for Bootstrap card component

This function wraps card.

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

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 (in this case, consider setting a height in card_body).

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.

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

HTML attributes on the returned Tag.

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny.express import ui

with ui.card(full_screen=True):
    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")