The bs4cards package supports a total eight different layout formats. First, there are two vertical layouts and two horizontal layouts:

  • Setting layout = "label-below" places the label below the image (the default)
  • Setting layout = "label-above" places the label above the image
  • Setting layout = "label-left" places the label to the left of the image
  • Setting layout = "label-right" places the label to the right of the image

In addition there are two “singleton” layouts:

  • Setting layout = "label-only" includes a label but no image
  • Setting layout = "image-only" includes an image but no label

Finally there are two “inset” layouts"

  • Setting layout = "inset-top" places the label at the top of the image
  • Setting layout = "inset-bottom" places the label at the bottom of the image

Vertical layouts

The vertical label-below layout is the default for bs4cards. Images are placed above the label, with the label title above text. Footers (if present) appear under the label, and the header (if present) is shown above:

galleries %>% 
  cards(
    title = long_name,
    link = gallery_url,
    image = image_url,
    layout = "label-below"
  )

The label-above layout reverses the positions of label and image:

galleries %>% 
  cards(
    title = long_name,
    link = gallery_url,
    image = image_url,
    layout = "label-above"
  )

Horizontal layouts

Horizontal card layouts are also supported in bs4cards, by setting layout = "label-left" or layout = "label-right". Here’s an example:

galleries %>% 
  cards(
    title = long_name,
    link = gallery_url,
    image = image_url,
    text = blurb,
    footer = date,
    layout = "label-right",
    width = 4
  )
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

Horizontal layouts tend to need more horizontal space, especially when the label includes text as well as a title. In the code above I set width = 4 to provide a little more room. You can also adjust the location of the breakpoint separating the image and the label. The breakpoint argument should be an integer between 1 and 5.

galleries[1,] %>% 
  cards(
    title = long_name, 
    image = image_url, 
    text = blurb,
    layout = "label-left", 
    breakpoint = 1, 
    width = 4
  )
Ash Cloud and Blood

Simulated watercolours in ggplot2 using the transparent polygon method

galleries[1,] %>% 
  cards(
    title = long_name, 
    image = image_url, 
    text = blurb,
    layout = "label-left", 
    breakpoint = 5, 
    width = 4
  )
Ash Cloud and Blood

Simulated watercolours in ggplot2 using the transparent polygon method

Image-only layout

In some cases there is no label to accompany the image, in which case setting layout = "image-only" is appropriate:

galleries[1:3, ] %>% 
  cards(
    link = gallery_url,
    image = image_url,
    layout = "image-only"
  )

It is still possible to add headers and footers, however:

galleries[1:3, ] %>% 
  cards(
    link = gallery_url,
    image = image_url,
    footer = long_name,
    layout = "image-only"
  )

Label-only layout

The inversion of the image-only layout is the label-only layout, which is appropriate whenever no image is included. This is not the most visually exciting layout, but there are situations where it may be handy:

galleries %>% 
  cards(
    link = gallery_url,
    title = long_name,
    text = blurb,
    layout = "label-only"
  )
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

Inset layouts

The remaining two layout types are “inset” types, in which the label is displayed as an overlay on top of the image.

galleries %>% 
  cards(
    title = long_name,
    text = blurb,
    link = gallery_url,
    image = image_url,
    layout = "inset-top"
  )
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

Like horizontal cards, inset cards use the breakpoint argument to specify the amount of space occupied by the label. The inset occupies a fixed proportion of the image height, so a little care is required. The smallest size (breakpoint = 1) is generally tall enough to accommodate a single line title:

galleries[1,] %>% 
  cards(title = long_name, image = image_url,
        layout = "inset-top", breakpoint = 1)
Ash Cloud and Blood

The largest size is breakpoint = 5 and is large enough to fit a modest caption:

galleries[1,] %>% 
  cards(title = long_name, image = image_url, text = blurb,
        layout = "inset-top", breakpoint = 5)
Ash Cloud and Blood

Simulated watercolours in ggplot2 using the transparent polygon method