card: Cards, blocks of content

In nteetor/yonder: A Reactive Web Framework Built on 'shiny'

Cards, blocks of content

Description

Create blocks of content with card. deck is used to group and add padding is placed around any number of cards. Additionally, grouping cards with deck has the benefit of aligning the footer of each card.

Usage

card(..., header = NULL, footer = NULL)

deck(...)

Arguments

...	For card, div()s, tag elements, or list groups to include in the card or additional named arguments passed as HTML attributes to the card element. For deck, any number of card()s or additional named arguments passed as HTML attributes to the parent element.
header	A character string or tag element specifying the header of the card, defaults to NULL, in which case a header is not added.
footer	A character string or tag element specifying the footer of the card, defaults to NULL, in which case a footer is not added.

Details

A simple card

Cards expand to fill the width of their parent element.

card(
  p("Praesent fermentum tempor tellus.")
)

Praesent fermentum tempor tellus.

Contextual styles

Cards include contextual content. Headings 1 through 5 are styled as main titles and heading 6 as a subtitle.

card(
  h5("Title"),
  h6("Subtitle"),
  p("Nullam tempus. Mauris mollis tincidunt felis."),
  p("Nullam libero mauris, consequat quis, varius et, dictum id, arcu."),
  footer = list(
    a(href = "#", "Link"),
    a(href = "#", "Link")
  )
)

Title

Subtitle

Nullam tempus. Mauris mollis tincidunt felis.

Nullam libero mauris, consequat quis, varius et, dictum id, arcu.

Link Link

Styling cards

Cards can have different borders and fonts.

card(
  .style %>%
    border("info") %>%
    font("info"),
  header = "Donec pretium posuere tellus",
  p("Donec hendrerit tempor tellus."),
  p("Cras placerat accumsan nulla.")
)

Donec pretium posuere tellus

Donec hendrerit tempor tellus.

Cras placerat accumsan nulla.

card(
  .style %>%
    border("danger") %>%
    font("danger"),
  p("Aliquam posuere."),
  p("Phasellus neque orci, porta a, aliquet quis, semper a, massa."),
  p("Pellentesque dapibus suscipit ligula.")
)

Aliquam posuere.

Phasellus neque orci, porta a, aliquet quis, semper a, massa.

Pellentesque dapibus suscipit ligula.

You can also change the background.

card(
  .style %>%
    background("warning"),
  header = "Phasellus lacus",
  p("Etiam laoreet quam sed arcu."),
  p("Etiam vel tortor sodales tellus ultricies commodo."),
  footer = "Nam euismod tellus id erat."
)

Phasellus lacus

Etiam laoreet quam sed arcu.

Etiam vel tortor sodales tellus ultricies commodo.

Nam euismod tellus id erat.

Cards with list groups

Combine a list group with a card.

card(
  listGroupInput(
    id = NULL,
    flush = TRUE,
    choices = c(
      "Pellentesque tristique imperdiet tortor.",
      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
      "Phasellus purus."
    ),
    values = c(
      "choice1",
      "choice2",
      "choice3"
    )
  )
)

Pellentesque tristique imperdiet tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus purus.

You can include other elements, too.

card(
  h5("Title"),
  listGroupInput(
    id = NULL,
    flush = TRUE,
    choices = c("Choice 1", "Choice 2")
  ),
  linkInput(id = NULL, label = "Link"),
  linkInput(id = NULL, label = "Link")
)

Title

Choice 1 Choice 2

Link Link

Tabbed content in cards

card(
  header = navInput(
    id = "tabs",
    choices = c("Tab 1", "Tab 2", "Tab 3"),
    appearance = "tabs"
  ),
  navContent(
    navPane(
      "Phasellus purus.",
      "Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.",
      "Phasellus purus."
    ),
    navPane(
      "Donec at pede. Praesent augue.",
      "Pellentesque tristique imperdiet tortor."
    ),
    navPane(
      "Fusce suscipit, wisi nec facilisis facilisis,",
      "est dui fermentum leo, quis tempor ligula erat quis odio.",
      "Donec hendrerit tempor tellus."
    )
  )
)

• Tab 1
• Tab 2
• Tab 3

Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus. Phasellus purus.

Pellentesque tristique imperdiet tortor.

est dui fermentum leo, quis tempor ligula erat quis odio. Donec hendrerit tempor tellus.

Deck of cards

deck(
  card(
    .style %>%
      background("info"),
    title = "Nullam tristique",
    p("Fusce sagittis, libero non molestie mollis, magna orci ultrices ",
      "dolor, at vulputate neque nulla lacinia eros."),
    p("Nunc rutrum turpis sed pede."),
    footer = "Cras placerat accumsan nulla."
  ),
  card(
    .style %>%
      background("dark") %>%
      font("light"),
    title = "Integer placerat",
    p("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ",
      "hendrerit tempor tellus."),
    footer = "Cras placerat accumsan nulla."
  ),
  card(
    .style %>%
      background("primary"),
    title = "Phasellus neque",
    p("Donec at pede. Etiam vel neque nec dui dignissim bibendum."),
    footer = "Cras placerat accumsan nulla."
  )
)

Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros.

Nunc rutrum turpis sed pede.

Cras placerat accumsan nulla.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus.

Cras placerat accumsan nulla.

Donec at pede. Etiam vel neque nec dui dignissim bibendum.

Cras placerat accumsan nulla.

See Also

Other components: alert(), badge(), blockquote(), collapsePane(), d1(), dropdown(), img(), jumbotron(), modal(), navContent(), popover(), pre(), toast()

nteetor/yonder documentation built on June 8, 2022, 1:36 p.m.