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,
  max_height = NULL,
  min_height = NULL,
  fill = TRUE,
  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.

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").

Value

A htmltools::div() tag.

See also

card_body() for putting stuff inside the card.

navset_card_tab() 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"
    )
  )
}