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.

Usage

card(
  ...,
  full_screen = FALSE,
  height = NULL,
  class = NULL,
  wrapper = card_body
)

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. Consider pairing this feature with card_body_fill() to get output that responds to changes in the size of the card.

height

Any valid CSS unit (e.g., height="200px").

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"). Consider setting wrapper to card_body_fill if the entire card wants responsive sizing or NULL to avoid wrapping altogether

Value

A htmltools::div() tag.

See also

card_body() for putting stuff inside the card.

navs_tab_card() for cards with multiple tabs.

layout_column_wrap() for laying out multiple cards (or multiple columns inside a card).

Examples

library(htmltools)

if (interactive()) {
  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"
    )
  )
}