When creating R markdown pages and websites it can be useful to organise content into a grid of links and image, sometimes known as “cards”. To design a course website you may want something like this:
The first step in using the package is to make sure that your R markdown document uses version 4 of bootstrap. The default behaviour of R markdown when creating HTML documents is to use bootstrap version 3, so this setting needs to be altered. To ensure that you are using bootstrap 4, you need to edit the YAML header for your document to specify which version of bootstrap you want to use. For a plain R markdown document or website (i.e., one where the output format is
html_document) here is the relevant section of YAML you might use:
output: html_document: theme: version: 4
For other kinds of R markdown documents, see the enabling bootstrap article.
The main function in bs4cards is
cards(). It takes a data frame as the first argument, generally the data set from which the bootstrap cards are to be constructed. The package comes with a data set
galleries that I’ll use to create the grids
library(bs4cards) galleries #> # 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.…
Each row in this data corresponds to one card in the grid. The columns contain information that is useful for constructing the cards.
For example to create the card grid shown at the start of the vignette, I needed to the
title for each card, the
text printed below it, the
image decorating the card, and the URL to which the title and image in each card should
link. Each of these is an argument to
cards(), and for each argument you can pass an expression that will be evaluated using the
cards() function supports a variety of different layouts and customisation options, discussed in the next article. To give a flavour of what’s possible, here’s another example based on the same data:
If you’re interested in using the bs4cards package, check out the articles page.