elastiCard: Hover elastic card container

In r2resize: In-Text Resize for Images, Tables and Fancy Resize Containers in 'shiny', 'rmarkdown' and 'quarto' Documents

Hover elastic card container

Description

Automatic elastic card holder for images or navigation items

Usage

elastiCard(
  ...,
  height.px = NULL,
  width.px = NULL,
  border.color = "white",
  border.width.px = 1,
  active.panel = 1
)

Arguments

...	list of image containers, see example below
height.px	height of container as numeric
width.px	width of container as numeric
border.color	color of border of each container
border.width.px	width of the container border
active.panel	the active panel or container e.g. 1

Value

Multiple cards with hover elastic functionality

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#basic example with texts alone
r2resize::elastiCard(
  item1 = c(
  icon = "edit",
  title="Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua. Ut enim ad
  minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea
  commodo consequat.",
  subtitle="A cool subtitle",
  text.color="blue"),
  item2 = c(
  title="Duis aute irure dolor in reprehenderit
  in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.",
  subtitle="A cool subtitle",
  text.color = "brown"
 )
)


#basic example with background image and texts
r2resize::elastiCard(
  item1 = c(
  bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
  icon = "edit",
  title="Sample text 1",
  subtitle="A cool subtitle"),
  item2 = c(
  bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
  title="Sample text 2",
  subtitle="A cool subtitle",
  text.color = "brown"
  )
)

r2resize documentation built on April 4, 2025, 1:50 a.m.