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 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

if (FALSE) { # rlang::is_interactive()
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"
  )
)
}