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.
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.…Conceptually, a card is comprised of five major parts:
The card image is controlled by the
imageargument, 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 settingimage = NULL. The exact positioning of the image depends on the card layout (discussed below).The card label has two parts, the
titleand thetext, 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 settingtitle = NULLand/ortext = NULL. The exact positioning of the label depends on the card layout (discussed below).The card link is controlled by the
linkargument, 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 settinglink = NULLThe card footer is controlled by the
footerargument, 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, setfooter = NULL.The card header is analogous to the footer, and is controlled by the
headerargument. 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 defaultheader = NULLis appropriate.
The different parts are illustrated in the example below:
galleries %>%
cards(
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
Silhouettes
Trees generated in flametree with random walk backgrounds
Track Marks
Voronoi tessellations with seed points sampled from an iterated function system
Viewports
Simple masks with ggfx using flametree-generated textures