shuffle_card: Shuffle card element
In dreamRs/shufflecards: Filter and Sort Grid Layouts in 'Shiny' and 'Markdown'

This function can be used in Shiny applications and RMarkdown documents to define cards inside a Shuffle layout.

shuffle_card(
  ...,
  groups = NULL,
  id = NULL,
  title = NULL,
  border = FALSE,
  closable = FALSE,
  class = NULL,
  style = NULL,
  width = NULL,
  height = NULL
)

`...`	UI elements to include within the card. Named elements can be used to arrange cards.
`groups`	Character vector of groups used to filtering.
`id`	Cards's id, can be useful to filter cards server-side.
`title`	Optional title, it will be wrapped in a H3 tag and can be updated from the server.
`border`	Logical, add borders to the card.
`closable`	Logical, add a button to remove the card, can't be reversed!
`class`	CSS class(es) to apply on the card.
`style`	Inline CSS to apply on the card.
`width, height`	The width / height of the container, e.g. `'400px'`, or `'100%'`; see `validateCssUnit`. If `use_bs_grid` in `shuffle_container` is `TRUE`, use a width between 1 and 12, like in `column`.

if (interactive()) {
  library(shiny)
  library(shufflecards)

  ui <- fluidPage(
    tags$h2("Arrange & filter a responsive grid of cards"),
    fluidRow(
      column(
        width = 3,
        radioButtons(
          inputId = "arrange",
          label = "Arrange:",
          choices = c("number", "letter")
        ),
        checkboxGroupInput(
          inputId = "filter",
          label = "Filter:",
          choices = c("red", "blue"),
          selected = c("red", "blue")
        )
      ),
      column(
        width = 9,
        shuffle_container(
          shuffleId = "grid",
          no_card = "Nothing to display !",
          width = "650px",
          shuffle_card(
            num = 1, letter = "C", # for arrange
            groups = "red", # for filter
            tags$div("1 - C", style = "text-align: center; line-height: 200px"),
            style = "border: 3px solid red; border-radius: 5px;",
            width = "300px", # better with fixed width/height
            height = "200px"
          ),
          shuffle_card(
            num = 2, letter = "B", # for arrange
            groups = "blue", # for filter
            tags$div("2 - B", style = "text-align: center; line-height: 200px"),
            style = "border: 3px solid blue; border-radius: 5px;",
            width = "300px", # better with fixed width/height
            height = "200px"
          ),
          shuffle_card(
            num = 3, letter = "D", # for arrange
            groups = c("red", "blue"), # for filter
            tags$div("3 - D", style = "text-align: center; line-height: 200px"),
            style = "border: 3px solid; border-radius: 5px; border-color: red blue blue red;",
            width = "300px", # better with fixed width/height
            height = "200px"
          ),
          shuffle_card(
            num = 4, letter = "A", # for arrange
            groups = "red", # for filter
            tags$div("4 - A", style = "text-align: center; line-height: 200px"),
            style = "border: 3px solid red; border-radius: 5px;",
            width = "300px", # better with fixed width/height
            height = "200px"
          )
        )
      )
    )
  )

  server <- function(input, output, session) {

    observeEvent(input$arrange, {
      arrange_cards(session, "grid", by = input$arrange)
    }, ignoreInit = TRUE)

    observeEvent(input$filter, {
      filter_cards_groups(session, "grid", groups = input$filter)
    }, ignoreInit = TRUE, ignoreNULL = FALSE)

  }

  shinyApp(ui, server)
}