Cards

The RUI::Card component renders a material-style card. Block elements can be included or omitted to create different layouts. Cards will fill the width of their container and should work well in flex boxes or grids.

Parameters

RUI::Card.new(**attrs) { &block }

**attrs (hash) (optional)
→ Any additional attributes to be applied to the <div> HTML element.

&block (block) (required)
→ The elements to be shown in the card

Example

A comprehensive example of the RUI::Card component is shown below.

This example includes all of the block-level sections made available via the RUI::Card component. The code to generate this component is below:

render RUI::Card.new do |c|
  c.header do |h|
    h.thumbnail { "https://picsum.photos/40" }
    h.titles do |t|
      t.title { "My Card" }
      t.subtitle { "Easy as pie" }
    end
    h.actions do
      render RUI::Buttons::Ghost.new(icon: "heart-filled", href: "#")
    end
  end
  c.image { "https://picsum.photos/300/100" }
  c.body { "This card was built with love." }
  c.footer do |f|
    render RUI::Buttons::Outline.new(icon: "edit", href: "#") { "Edit" }
    render RUI::Buttons::Primary.new(icon: "share", href: "#") { "Share" }
  end
end

By experimenting with the order, inclusion and omission of sections, you can achieve many variations of a card with this component.