Card group(ui_card_group)Bootstrap Logo

UiBibz::Ui::Core::Boxes::CardGroup
These elements allow the placement of the cards by group.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

ui_card_group options, html_options do |cg|
  cg.card do
    content
  end
end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:
  • card(inherit of card)
  • html[html/string]Insert html as a component

Examples

Some examples explain how to use the options present in the component.

Card group

The card_group component is an extension of component element.
Like this one, the card_group component has options and html_options present as hash.
It inherits options of component element.

header 1
content 1
footer 1
image 1
card title

this is a wider card with supporting text below as a natural lead-in to additional content. this content is a little bit longer.

last updated 3 mins ago

  • cras justo odio
  • Dapibas ac facilisis in
  • Header list

    vestibulum at eros

content 4
some quick example text to build on the card title and make up the bulk of the card's content.

lorem ipsum dolor sit amet, consectetur adipiscing elit. integer posuere erat a ante.

someone famous in source title
 
ui_card_group do |cg|
  cg.card do |c|
    c.header "header 1"
    c.body "content 1"
    c.footer "footer 1"
  end
  cg.card do |c|
    c.image "image.svg"
    c.body do |b|
      b.title "Card title"
      b.text "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
      b.text "<small class='text-muted'>Last updated 3 mins ago</small>"
    end
  end
  cg.card do |c|
    c.list_group do |lg|
      lg.list "Cras justo odio"
      lg.list "Dapibas ac facilisis in", state: :active
      lg.list do |l|
        l.header "Header list"
        l.body "vestibulum at eros"
      end
    end
  end
  cg.card "Content 4 <br/> Some quick example text to build on the card title and make up the bulk of the card's content."
  cg.card status: :primary, type: :inverse, text_position: :center do
    "<bodyquote class='card-bodyquote'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></bodyquote>".html_safe
  end
end

<div class="card-group">
  <div class="card">
    <div class="card-header">header 1</div>
    <div class="card-body">content 1</div>
    <div class="card-footer">footer 1</div>
  </div>
  <div class="card">
    <img src="/assets/image.svg" alt="Image">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <ul class="list-group-flush list-group">
      <li class="list-group-item">Cras justo odio</li>
      <li class="active list-group-item">Dapibas ac facilisis in</li>
      <li class="list-group-item">
        <h4 class="list-group-item-heading">Header list</h4>
        <p class="list-group-item-text">vestibulum at eros</p>
      </li>
    </ul>
  </div>
  <div class="card card-body">Content 4 <br> Some quick example text to build on the card title and make up the bulk of the card's content.
  </div>
  <div class="card-primary card text-center card-body card-inverse">
    <bodyquote class="card-bodyquote"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></bodyquote>
  </div>
</div>