In djnavarro/bs4cards: Generate Bootstrap Cards

knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
library(tibble)
library(bs4cards)

The colour and width of card borders are customisable, as is the amount of rounding on the card borders.

Border width

To remove the borders entirely set border_width = 0:

galleries[1:3, ] %>% 
  cards(
    title = long_name,
    image = image_url, 
    border_width = 0
  )

For thick borders, set border_width = 5:

galleries[1:3, ] %>% 
  cards(
    title = long_name,
    image = image_url, 
    border_width = 5
  )

Border colour

By default the border_colour argument is set to NULL, and is interpreted as a CSS value of "inherit". However, you can override this and set the card label colour manually. The border_colour argument will accept any valid colour string recognised by R. The input can either be a single colour or a vector assigning each card a different border colour:

galleries[1:3, ] %>% 
  cards(
    title = long_name,
    image = image_url, 
    border_width = 2,
    border_colour = c("#8b0000", "black", "#0b0b80")
  )

Border radius

The border_radius argument is used to control the degree of rounding of the card borders, and should be an integer between 0 and 5. At border_radius = 0 the cards are perfectly rectangular, with no rounding at all:

galleries[1:3, ] %>% 
  cards(
    title = long_name,
    image = image_url, 
    border_radius = 0,
  )

At the roundest setting border_radius = 5 produces noticeably rounded rectangles:

galleries[1:3, ] %>% 
  cards(
    title = long_name,
    image = image_url, 
    border_radius = 5,
  )

Additional customisation

Additional border customisation is possible, by passing character strings for border_width and border_width. When character input is used, the cards() function passes the input directly to the CSS. For example, you can create cards with circular images and very thick borders like this:

galleries[1:3, ] %>% 
  cards(
    image = image_url, 
    border_colour = "#dddddd",
    border_width = "20px",
    border_radius = "20rem",
  )

djnavarro/bs4cards documentation built on Dec. 20, 2021, 12:04 a.m.