Generate Bootstrap Cards.

bs4cards

When creating R markdown websites, I often find myself wanting to organise content into a nice-looking grid of links with thumbnail images and maybe a small amount of text. It’s a design pattern I use over and over again in my own sites. Whether I’m creating previews for lectures, profiles and bios for people, or links to galleries, I find myself needing the ability to create content that looks something like this:

In my ideal world, I’d store the information in a data frame called slides (or whatever) that has one row per card and columns specifying the relevant information, and would then be able to build the card with a command like this:

slides %>% 
  cards(
    title = messy_title,
    text = description,
    link = link_url,
    image = path_to_image
  )

where title = messy_title means that the card title should be set using the messy_title variable in the slides data frame, and so on.

Of course, having made quite a few sites that need this kind of thing, I’ve found that the specific layout I need for the cards varies from case to case. Sometimes I want the text under the image (as in the example above), other times I want the text to appear to one side, and other times I want the text to float over the image. So I’d want to have a layout argument that could switch between different layout formats, and probably a lot of other customisation options too.

Realising that I’m certain to make many more sites that need this functionality (and suspecting that I’m not the only one), I wrote bs4cards to make this task a little easier inside. You can install the development version from GitHub with:

# install.packages("devtools")
devtools::install_github("djnavarro/bs4cards")

The package exports a single function cards() which works as described above. It takes a data frame as input and automatically generates the HTML you need to create a card grid.

Awkwardly, it’s a little tricky to show all the functionality in the README because this page displays on GitHub (as well as the package website) and there’s no bootstrap library underneath the GitHub version… so if you’d like to see some examples of how the package works, check out the get started page!