Card

Description

The Card component provides a flexible container for organizing and displaying various types of content.

FREE

This component is available for free. It implements the Bootstrap Card component. See the installation instructions below for more details.

Arguments

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::CardComponent.new do |card| %>
  <% card.with_body.with_content("This is the card body") %>
<% end %>

<div class="card">
  <div class="card-body">This is the card body</div>
</div>

With header

<%= render Railsboot::CardComponent.new do |card| %>
  <% card.with_header.with_content("This is the card header") %>
  <% card.with_body.with_content("This is the card body") %>
<% end %>

<div class="card">
  <div class="card-header">This is the card header</div>
  <div class="card-body">This is the card body</div>
</div>

With footer

<%= render Railsboot::CardComponent.new do |card| %>
  <% card.with_body.with_content("This is the card body") %>
  <% card.with_footer.with_content("This is the card footer") %>
<% end %>

<div class="card">
  <div class="card-body">This is the card body</div>
  <div class="card-footer">This is the card footer</div>
</div>

With list groups

<%= render Railsboot::CardComponent.new do |card| %>
  <% card.with_header.with_content("This is the card with a list group") %>
  <% card.with_list_group do |list_group| %>
    <% list_group.with_item.with_content("List Group Item 1") %>
    <% list_group.with_item.with_content("List Group Item 2") %>
    <% list_group.with_item.with_content("List Group Item 3") %>
  <% end %>
<% end %>

<div class="card">
  <div class="card-header">This is the card with a list group</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">List Group Item 1</li>
    <li class="list-group-item">List Group Item 2</li>
    <li class="list-group-item">List Group Item 3</li>
  </ul>
</div>

Slots

header Railsboot::Card::HeaderComponent

A header slot defines the header area of the card with any arbitrary content inside.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

bodies Railsboot::Card::BodyComponent

A body slot defines the body area of the card with any arbitrary content inside.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

list_groups Railsboot::ListGroupComponent

A list_group slot displays list data with an auto-flush of the parent element.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

footer Railsboot::Card::FooterComponent

A footer slot defines the footer area of the card with any arbitrary content inside.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/card_component.rb).
A view template (app/components/railsboot/card_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/card_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Callout Carousel