Card column(ui_card_column)

UiBibz::Ui::Core::Boxes::CardColumn

These elements allow the placement of the cards by column.

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_column options, html_options do |cc|
  cc.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 column

header 1

content 1

footer 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.

Ruby
Html

ui_card_column do |cc|
  cc.card do |c|
    c.header "header 1"
    c.body "content 1"
    c.footer "footer 1"
  end
  cc.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
  cc.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
  cc.card "Content 4 <br/> Some quick example text to build on the card title and make up the bulk of the card's content."
  cc.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-columns">
  <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>