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.

Customizing Cards

Colors

Background color

library(cardargus)

# Orange card
card_orange <- svg_card(title = "ALERT", bg_color = "#fab255", ...)

# Blue card
card_blue <- svg_card(title = "INFO", bg_color = "#3498db", ...)
 
# Green card
card_green <- svg_card(title = "SUCCESS", bg_color = "#2ecc71", ...)

# Red card
card_red <- svg_card(title = "URGENT", bg_color = "#e74c3c", ...)

# Dark card
card_dark <- svg_card(title = "PREMIUM", bg_color = "#2c3e50", ...)

Gradient backgrounds

You can use CSS-style linear gradients instead of solid colors:

# Horizontal gradient (left to right)
card <- svg_card(
  title = "HOUSING",
  bg_color = "linear-gradient(to right, #1a5a3a, #2e7d32)",
  ...
)

# Diagonal gradient (135 degrees)
card <- svg_card(
  title = "PROGRAM", 
  bg_color = "linear-gradient(135deg, #667eea, #764ba2)",
  ...
)

# Vertical gradient (top to bottom)
card <- svg_card(
  title = "PROJECT",
  bg_color = "linear-gradient(to bottom, #00c6ff, #0072ff)",
  ...
)

# Multi-color gradient
card <- svg_card(
  title = "RAINBOW",
  bg_color = "linear-gradient(to right, #ff6b6b, #feca57, #48dbfb)",
  ...
)

Supported gradient directions:

Text colors

card <- svg_card(
  title = "MY CARD",
  title_color = "#FFD700",      # Gold title
  label_color = "#E0E0E0",      # Light gray labels
  footer_color = "white",       # White footer
  value_text_color = "#212529", # Dark gray values
  value_bg_color = "#f8f8ff",   # Field background
  ...
)

Fonts

cardargus uses Google Fonts by default. The default font is “Jost”, but you can use any Google Font:

# Using Roboto
card <- svg_card(
  title = "CARD",
  font = "Roboto",
  ...
)

# Using Open Sans
card <- svg_card(
  title = "CARD",
  font = "Open Sans",
  ...
)

# Using Montserrat
card <- svg_card(
  title = "CARD",
  font = "Montserrat",
  ...
)

Font sizes

card <- svg_card(
  title = "CARD",
  title_fontsize = 32,    # Larger title
  label_fontsize = 12,    # Labels
  value_fontsize = 11,    # Values
  footer_fontsize = 8,    # Footer
  ...
)

Dimensions

Card width

# Narrow card
card_narrow <- svg_card(width = 400, ...)

# Default card
card_default <- svg_card(width = 500, ...)

# Wide card
card_wide <- svg_card(width = 600, ...)

Padding and corners

card <- svg_card(
  padding = 25,         # Internal padding
  corner_radius = 12,   # More rounded corners
  ...
)

Custom logos

# Without logos
card <- svg_card(
  logos = list(),
  ...
)

# With file paths
card <- svg_card(
  logos = c("path/to/logo1.svg", "path/to/logo2.svg"),
  logos_height = 40,
  ...
)

# With bundled logos
card <- svg_card(
  logos = c(get_svg_path("morar_bem.svg")),
  logos_height = 40,
  bottom_logos = c(get_svg_path("gov_pe3.svg")),
  bottom_logos_height = 35,
  ...
)

Complete example

card <- svg_card(
  title = "HOUSING PROGRAM",
  badges_data = list(
    list(label = "Units", value = "1,000", color = "white"),
    list(label = "Investment", value = "$100M", color = "#4CAF50")
  ),
  fields = list(
    list(list(label = "Project", value = "Downtown Development", with_icon = TRUE)),
    list(
      list(label = "City", value = "Boston"),
      list(label = "State", value = "MA")
    )
  ),
  bg_color = "#2c3e50",
  width = 550,
  padding = 25,
  corner_radius = 12,
  font = "Roboto",
  title_fontsize = 24,
  title_color = "#ecf0f1",
  label_color = "#bdc3c7",
  footer = "Real-time updated data",
  footer_color = "#95a5a6"
)

Displaying in documents

# In R Markdown or Quarto
include_card(card)

# Or as PNG for better compatibility
include_card_png(card, dpi = 150)

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.