Card

Card(
  _.slots.footer(
    div(
      cls("flex justify-between items-center"),
      Button(_.variant.brand, _.pill := true)("More Info"),
      Rating()()
    )
  ),
  _.slots.media(
    img(
      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",
      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."
    )
  )
)(
  width.px(300),
  strong("Mittens"),
  br(),
  "This kitten is as cute as he is playful. Bring him home today!",
  br(),
  small("6 weeks old")
)

Card(  _.slots.footer(    div(      cls("flex justify-between items-center"),      Button(_.variant.brand, _.pill := true)("More Info"),      Rating()()    )  ),  _.slots.media(    img(      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."    )  ))(  width.px(300),  strong("Mittens"),  br(),  "This kitten is as cute as he is playful. Bring him home today!",  br(),  small("6 weeks old"))

Examples

Basic Card

Basic cards aren't very exciting, but they can display any content you want them to.

Card()(
  maxWidth.px(300),
  "This is just a basic card. No media, no header, and no footer. Just your content."
)

Card()(  maxWidth.px(300),  "This is just a basic card. No media, no header, and no footer. Just your content.")

Card with Header

Headers can be used to display titles and more. If using SSR, you need to also use the with-header attribute to add a header to the card (if not, it is added automatically).

Card(
  _.slots.header(
    div(
      cls("flex justify-between items-center"),
      "Header Title",
      Button(
        _.appearance.plain,
        _.slots.start(Icon(_.name := "gear", _.variant := "solid", _.label := "Settings")())
      )()
    )
  )
)(
  maxWidth.px(300),
  "This card has a header. You can put all sorts of things in it!"
)

Card(  _.slots.header(    div(      cls("flex justify-between items-center"),      "Header Title",      Button(        _.appearance.plain,        _.slots.start(Icon(_.name := "gear", _.variant := "solid", _.label := "Settings")())      )()    )  ))(  maxWidth.px(300),  "This card has a header. You can put all sorts of things in it!")

Footers can be used to display actions, summaries, or other relevant content. If using SSR, you need to also use the with-footer attribute to add a footer to the card (if not, it is added automatically).

Card(
  _.slots.footer(
    div(
      cls("flex justify-between items-center"),
      Rating()(),
      Button(_.variant.brand)("Preview")
    )
  )
)(
  maxWidth.px(300),
  "This card has a footer. You can put all sorts of things in it!"
)

Card(  _.slots.footer(    div(      cls("flex justify-between items-center"),      Rating()(),      Button(_.variant.brand)("Preview")    )  ))(  maxWidth.px(300),  "This card has a footer. You can put all sorts of things in it!")

Media

Card media is displayed atop the card and will stretch to fit. If using SSR, you need to also use the with-media attribute to add a media section to the card (if not, it is added automatically).

Card(
  _.slots.media(
    img(
      src := "https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80",
      alt := "A kitten walks towards camera on top of pallet."
    )
  )
)(
  maxWidth.px(300),
  "This is a kitten, but not just any kitten. This kitten likes walking along pallets."
)
Card(
  _.slots.media(
    videoTag(
      sourceTag(src := "https://uploads.webawesome.com/dog-with-glasses.mp4"),
      p("Your browser doesn't support HTML video")
    )
  )
)(
  maxWidth.px(300),
  "This is a kitten, but not just any kitten. This kitten likes walking along pallets."
)

Card(  _.slots.media(    img(      src := "https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80",      alt := "A kitten walks towards camera on top of pallet."    )  ))(  maxWidth.px(300),  "This is a kitten, but not just any kitten. This kitten likes walking along pallets.")Card(  _.slots.media(    videoTag(      sourceTag(src := "https://uploads.webawesome.com/dog-with-glasses.mp4"),      p("Your browser doesn't support HTML video")    )  ))(  maxWidth.px(300),  "This is a kitten, but not just any kitten. This kitten likes walking along pallets.")

Appearance

Use the appearance attribute to change the card's visual appearance.

Card(
  _.slots.media(
    img(
      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",
      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."
    )
  )
)(
  maxWidth.px(200),
  "Outlined (default)"
)
Card(
  _.appearance := "plain",
  _.slots.media(
    img(
      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",
      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."
    )
  )
)(
  maxWidth.px(200),
  "Plain"
)
Card(
  _.appearance := "filled",
  _.slots.media(
    img(
      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",
      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."
    )
  )
)(
  maxWidth.px(200),
  "Filled"
)
Card(
  _.appearance := "accent",
  _.slots.media(
    img(
      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",
      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."
    )
  )
)(
  maxWidth.px(200),
  "Accent"
)

Card(  _.slots.media(    img(      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."    )  ))(  maxWidth.px(200),  "Outlined (default)")Card(  _.appearance := "plain",  _.slots.media(    img(      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."    )  ))(  maxWidth.px(200),  "Plain")Card(  _.appearance := "filled",  _.slots.media(    img(      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."    )  ))(  maxWidth.px(200),  "Filled")Card(  _.appearance := "accent",  _.slots.media(    img(      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."    )  ))(  maxWidth.px(200),  "Accent")

Orientation

Set the orientation attribute to horizontal to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.

The actions slot is only available for the horizontal orientation

Card(
  _.orientation := "horizontal",
  _.slots.media(
    img(
      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",
      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."
    )
  ),
  _.slots.actions(
    Button(
      _.variant.neutral, 
      _.appearance.plain,
    )(
      Icon(_.name := "ellipsis", _.label := "actions")()
    )
  )
)(
  cls := "horizontal-card",
  "This card has a horizontal orientation with media, body, and actions arranged side-by-side."
)

Card(  _.orientation := "horizontal",  _.slots.media(    img(      src := "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80",      alt := "A kitten sits patiently between a terracotta pot and decorative grasses."    )  ),  _.slots.actions(    Button(      _.variant.neutral,       _.appearance.plain,    )(      Icon(_.name := "ellipsis", _.label := "actions")()    )  ))(  cls := "horizontal-card",  "This card has a horizontal orientation with media, body, and actions arranged side-by-side.")

.horizontal-card {
  img[slot='media'] {
    max-width: 300px;
  }
}

.horizontal-card {  img[slot='media'] {    max-width: 300px;  }}