Skip to contents

In this article I’ll provide an overview of the various arguments to cards(), and how they can be used to customise the look and feel of a card grid, using the built in galleries data.

#> # A tibble: 7 × 7
#>   long_name  short_name  date   blurb     paintbrushes image_url   gallery_url  
#>   <chr>      <chr>       <chr>  <chr>     <chr>        <chr>       <chr>        
#> 1 Ash Cloud… ash         2021-… Simulate… ggplot2      https://bs… https://art.…
#> 2 Ghosts on… ghosts      2021-… Abstract… ambient      https://bs… https://art.…
#> 3 Ice Floes  ice-floes   2021-… Abstract… ambient      https://bs… https://art.…
#> 4 Native Fl… native-flo… 2021-… Collecti… ggplot2; fl… https://bs… https://art.…
#> 5 Silhouett… silhouettes 2021-… Trees ge… ggplot2; rc… https://bs… https://art.…
#> 6 Track Mar… track-marks 2020-… Voronoi … ggplot2; rc… https://bs… https://art.…
#> 7 Viewports  viewports   2021-… Simple m… ggplot2; fl… https://bs… https://art.…

Conceptually, a card is comprised of five major parts:

  • The card image is controlled by the image argument, which should specify the path to the image file to be displayed in each card. As a general principle, bs4cards does not distort the appearance of an image: it is not cropped, nor does it alter the aspect ratio. The only thing it will do is rescale the size of the image as the size of the browser window changes. The image can be omitted by setting image = NULL. The exact positioning of the image depends on the card layout (discussed below).

  • The card label has two parts, the title and the text, whose values should be character strings specifying the text to be displayed. As long as one or both of these arguments are specified, the card will have a label. The title is always displayed above the text, and the size of the label is adjusted flexibly as the screen size changes. The constituent parts can be omitted by setting title = NULL and/or text = NULL. The exact positioning of the label depends on the card layout (discussed below).

  • The card link is controlled by the link argument, which should specify the url to be opened when the user selects the card. The link itself does not occupy any space: if it exists, then it is applied to both the image and the card title. The link can be omitted by setting link = NULL

  • The card footer is controlled by the footer argument, which should specify text that will displayed at the bottom of the card (it always appears at the bottom regardless of what layout is adopted). The footer text is displayed in muted colours and is intended for the display of ancillary information. Some care is required when using footers, discussed later in the article. To omit footers, set footer = NULL.

  • The card header is analogous to the footer, and is controlled by the header argument. The only difference is that the header appears at the top of the card. This is rarely a useful thing to do, and while the bs4cards package does allow it, a lot of care is required (discussed later). In most cases no header is needed, in which case the default header = NULL is appropriate.

The different parts are illustrated in the example below:

galleries %>% 
    title = long_name,
    text = blurb,
    link = gallery_url,
    image = image_url,
    footer = date
Ash Cloud and Blood

Simulated watercolours in ggplot2 using the transparent polygon method

Ghosts on Marble Paper

Abstract landscapes generated using ambient

Ice Floes

Abstract icebergs generated using ambient

Native Flora

Collections of small flametrees that resemble branching plants


Trees generated in flametree with random walk backgrounds

Track Marks

Voronoi tessellations with seed points sampled from an iterated function system


Simple masks with ggfx using flametree-generated textures