Create an UIkit card

Create layout boxes with different styles

UIkitCard(..., title = NULL, size = NULL, hover = "FALSE",
  style = "default", header = NULL, body = NULL, footer = NULL,
  badge = NULL, horizontal = FALSE, width = "1-2", height = NULL,
  shadow = NULL, shadow_position = NULL, animation = NULL)

Arguments

...	any element.
title	Card title.
size	Card size: either NULL, "small" or "large".
hover	Whether to trigger a hover effect. FALSE by default.
style	Card style: "default", "primary" or "secondary".
header	Header content, if any.
body	Body content, if any.
footer	Footer content, if any.
badge	Badge content, if any.
horizontal	Whether to display horizontal content. FALSE by default. If TRUE, use UIkitCardMedia with horizontal set to TRUE!
width	Card width: if "1-2", the card will take half of the page, "1-3" will be one third... If you wrap card in a grid layout, set width to NULL since the grid will handle it automatically. The sum of all element containing width should be 1. You can also specify fixed width such as "small", "medium", "large", "xlarge", "xxlarge".
height	Card height: "small", "medium" or "large".
shadow	Create a shadow around the box, similar to material design z-depth. "small", "medium", "large" or "xlarge". NULL by default.
shadow_position	Shadow position: NULL or "bottom".
animation	NULL by default: card animation if any, see https://getuikit.com/docs/animation#usage.

Note

Never use footer and header when horizontal is TRUE!

Examples

if(interactive()){
library(shiny)

shiny::shinyApp(
 ui = UIkitPage(
   title = "My UIkit application",
   UIkitGrid(
    child_width = "expand",
    gutter = "small",
    UIkitGridElement(
     UIkitCard(
      width = NULL,
      height = "medium",
      title = "My card",
      hover = TRUE,
      style = "primary",
      horizontal = FALSE,
      header = "This is the header",
      body = "This is the body",
      footer = "This is the footer"
     )
    ),
    UIkitGridElement(
     UIkitCard(
      width = NULL,
      title = "My card",
      badge = "test",
      horizontal = FALSE,
      UIkitCardMedia(
        src = "https://getuikit.com/docs/images/light.jpg",
        horizontal = TRUE,
        position = "left"
      ),
      body = "This is the body"
     )
    ),
    UIkitGridElement(
     UIkitCard(
      animation = "shake",
      width = NULL,
      title = "My card",
      hover = TRUE,
      horizontal = TRUE,
      height = "medium",
      UIkitCardMedia(
        src = "https://getuikit.com/docs/images/light.jpg",
        horizontal = TRUE,
        position = "left"
      ),
      body = "This is the body"
     )
    )
   )
 ),
 server = function(input, output) {}
 )
}