card: A Bootstrap card component

In bslib: Custom 'Bootstrap' 'Sass' Themes for 'shiny' and 'rmarkdown'

A Bootstrap card component

Description

A general purpose container for grouping related UI elements together with a border and optional padding. To learn more about card()s, see the Cards article or the other articles listed in the References section below.

Usage

card(
  ...,
  full_screen = FALSE,
  height = NULL,
  max_height = NULL,
  min_height = NULL,
  fill = TRUE,
  class = NULL,
  wrapper = card_body,
  id = NULL
)

Arguments

...	Unnamed arguments can be any valid child of an htmltools tag (which includes card items such as card_body(). Named arguments become HTML attributes on returned UI element.
full_screen	If TRUE, an icon will appear when hovering over the card body. Clicking the icon expands the card to fit viewport size.
height	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()).
max_height, min_height	Any valid CSS unit (e.g., max_height="200px"). Doesn't apply when a card is made full_screen (in this case, consider setting a max_height in card_body()).
fill	Whether or not to allow the card to grow/shrink to fit a fillable container with an opinionated height (e.g., page_fillable()).
class	Additional CSS classes for the returned UI element.
wrapper	A function (which returns a UI element) to call on unnamed arguments in ... which are not already card item(s) (like card_header(), card_body(), etc.). Note that non-card items are grouped together into one wrapper call (e.g. given card("a", "b", card_body("c"), "d"), wrapper would be called twice, once with "a" and "b" and once with "d").
id	Provide a unique identifier for the card() or value_box() 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.

Value

A htmltools::div() tag.

References

Several articles on the bslib website feature the card component:

• Cards

• Get Started: Dashboards

• Get Started: Any Project

• Column-based layouts

• Filling layouts: Full-screen cards

See Also

Card item functions create the various parts of a card.

navset_card_tab(), navset_card_pill() and navset_card_underline() create cards with tabbed navigation.

layout_columns() and layout_column_wrap() help position multiple cards into columns and rows and can also be used inside a card.

layout_sidebar() adds a sidebar to a card when nested in card() or card_body().

value_box() uses card() to highlight a showcase a key piece of information.

Other Components: accordion(), popover(), tooltip(), value_box()

Examples

library(htmltools)

card(
  full_screen = TRUE,
  card_header(
    "This is the header"
  ),
  card_body(
    p("This is the body."),
    p("This is still the body.")
  ),
  card_footer(
    "This is the footer"
  )
)

bslib documentation built on April 3, 2025, 10:15 p.m.