Cards are a common organizing unit for modern user interfaces (UI). At their core, they’re just rectangular containers with borders and padding. However, when utilized properly to group related information, they help users better digest, engage, and navigate through content. This is why most successful dashboard/UI frameworks make cards a core feature of their component library. This article provides an overview of the API that bslib provides to create Bootstrap cards.
To demonstrate that bslib cards work outside of Shiny (i.e., in R Markdown, static HTML, etc), we’ll make repeated use of statically rendered htmlwidgets like plotly and leaflet. Here’s some code to create those widgets:
library(bslib) library(shiny) library(htmltools) library(plotly) library(leaflet) plotly_widget <- plot_ly(x = diamonds$cut) %>% config(displayModeBar = FALSE) %>% layout(margin = list(t = 0, b = 0, l = 0, r = 0)) leaflet_widget <- leafletOptions(attributionControl = FALSE) %>% leaflet(options = .) %>% addTiles()
card() is designed to handle any number of “known”
card items (e.g.,
etc) as unnamed arguments (i.e., children). As we’ll see shortly,
card() also has some useful named arguments (e.g.,
If you find yourself using
card_body() without changing
any of its defaults, consider dropping it altogether since any direct
card() that aren’t “known”
items, are wrapped together into an implicit
For example, the code to the right generates HTML that is identical to
the previous example:
By default, a
card()’s size grows to accommodate the
size of its contents. Thus, if a
card_body() contains a
large amount of text, tables, etc., you may want to specify a
max_height. That said, when laying
out multiple cards, it’s likely best not
to specify height on the
card(), and instead, let the
layout determine the height
Although scrolling is convenient for reducing the amount of space
required to park lots of content, it can also be a nuisance to the user.
To help reduce the need for scrolling, consider pairing scrolling with
full_screen = TRUE (which adds an icon to expand the card’s
size to the browser window). Notice how, when the card is expanded to
height won’t effect
the full-screen size of the card.
card( max_height = 250, full_screen = TRUE, card_header( "A long, scrolling, description" ), lorem::ipsum(paragraphs = 3, sentences = 5) )
Amet dictumst ultrices nibh natoque, donec semper porta. Arcu vel libero consequat ante. Hendrerit mollis purus eleifend justo interdum, velit ultricies cubilia ligula cubilia? Per lobortis erat pellentesque magna primis dignissim, in pellentesque leo. Potenti hendrerit, nisl sagittis etiam ultricies velit cubilia condimentum sem mus auctor.
Lorem et penatibus sagittis cum lacus litora – id ridiculus! Mauris ullamcorper tellus vivamus, habitasse magna mollis nisi cubilia dapibus conubia. Maecenas ultricies et platea enim libero vel. Aenean curae; accumsan condimentum, quis eleifend id dignissim ut arcu velit? Nullam malesuada faucibus, nullam ac, facilisi eget, augue lobortis porttitor eleifend purus fermentum.
Sit cras magna donec sociis nulla tristique habitasse ullamcorper arcu arcu interdum gravida. Semper morbi dui: ullamcorper molestie rutrum sed. Lectus duis quam lobortis ad himenaeos; aliquet augue elementum. Phasellus varius suscipit nulla class elementum non magnis, luctus imperdiet dignissim ultricies netus. Lacus morbi facilisis magnis per: tortor mi nisl velit at sed enim tellus.
card()’s default behavior is optimized for
facilitating filling layouts. More
specifically, if a fill item (e.g.,
plotly_widget), appears as a direct child of a
card_body(), it resizes to fit the
specified height. This means, by specifying
height = 250
we’ve effectively shrunk the plot’s height from its default of 400 down
to about 200 pixels. And, when expanded to
plot grows to match the
card()’s new size.
Most htmlwidgets (e.g., plotly, leaflet, etc) and some other Shiny
output bindings (e.g,
imageOutput(), etc) are fill items by
default, so this behavior “just works” in those scenarios. And, in some
of these situations, it’s helpful to remove
padding, which can be done via spacing
& alignment utility classes.
Fill item(s) aren’t limited in how much they grow
and shrink, which can be problematic when a card becomes very small. To
work around this, consider adding a
min_height on the
card_body() container. For example, try using the handle on
the lower-right portion of this card example to make the card
This interactive example is a bit contrived in that we’re using CSS
resize to demonstrate how to make plots that don’t shrink beyond a
certain point, but this concept becomes quite useful when implementing
page-level filling layouts (i.e.,
page_fillable()) with multiple