The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

Flexible and Elastic Card Layouts with r2resize

R Packager

2025-11-11

This vignette explores the flexCard() and elastiCard() functions from the r2resize package, which provide dynamic and interactive card layouts for displaying images, navigation items, or general content.

Flexible Card - flexCard()

The flexCard() function creates an expandable flexible card holder, ideal for a list of items like images or navigation links that expand on hover or click.

# Basic flex card with two items
r2resize::flexCard(
  item1 = c(
    bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
    icon = "home",
    title = "Welcome Home",
    subtitle = "Your personalized dashboard"
  ),
  item2 = c(
    bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
    icon = "info",
    title = "About Us",
    subtitle = "Learn more about our services",
    icon.color = "blue",
    text.color = "white"
  )
)

# Flex card with custom dimensions and active panel
r2resize::flexCard(
  itemA = c(
    bg = "https://r2resize.obi.obianom.com/m/1b.jpg",
    icon = "chart-line",
    title = "Analytics",
    subtitle = "View your data insights"
  ),
  itemB = c(
    bg = "https://r2resize.obi.obianom.com/m/1.jpg",
    icon = "envelope",
    title = "Messages",
    subtitle = "Check your inbox",
    icon.color = "red",
    text.color = "lightgray"
  ),
  height.px = 300,
  width.px = 800,
  border.color = "darkgray",
  border.width.px = 2,
  active.panel = 2 # Make the second item active by default
)

# Example within a Shiny app
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      h2("Flex Cards in Shiny"),
      flexCard(
        item1 = c(
          bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
          icon = "lightbulb",
          title = "Idea Generation",
          subtitle = "Brainstorm new concepts"
        ),
        item2 = c(
          bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
          icon = "code",
          title = "Development",
          subtitle = "Build your next project",
          icon.color = "green"
        )
      )
    ),
    server = function(input, output) {}
  )
}

Hover Elastic Card - elastiCard()

The elastiCard() function creates an automatic elastic card holder, where cards expand and contract dynamically on hover, providing an engaging user experience.

# Elasti card with text content
r2resize::elastiCard(
  item1 = c(
    title = "Product Features",
    subtitle = "Innovative and user-friendly",
    desc = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    text.color = "lightgreen"
  ),
  item2 = c(
    title = "Our Vision",
    subtitle = "Pioneering the future",
    desc = "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    text.color = "orange"
  )
)

# Elasti card with background images and text
r2resize::elastiCard(
  item1 = c(
    bg = "https://r2resize.obi.obianom.com/m/1b.jpg",
    title = "Scenic Landscapes",
    subtitle = "Explore breathtaking views",
    desc = "A collection of stunning natural beauty from around the world."
  ),
  item2 = c(
    bg = "https://r2resize.obi.obianom.com/m/1.jpg",
    title = "Urban Exploration",
    subtitle = "Discover city life",
    desc = "Dive into the vibrant and dynamic atmosphere of metropolitan areas."
  ),
  height.px = 350,
  width.px = 900,
  border.color = "gray",
  border.width.px = 3
)

# Example within a Shiny app
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      h2("Elastic Cards in Shiny"),
      elastiCard(
        item1 = c(
          bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
          title = "Project Alpha",
          subtitle = "Phase 1 Complete",
          desc = "Successfully concluded the initial development phase with excellent results."
        ),
        item2 = c(
          bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
          title = "Project Beta",
          subtitle = "Upcoming Milestones",
          desc = "Preparing for the next stage of development and feature integration."
        )
      )
    ),
    server = function(input, output) {}
  )
}

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.