elastiCard {r2resize}

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"
  )
)