Card Grid(ui_card_grid)

UiBibz::Ui::Core::Boxes::CardGrid

These elements allow the placement of the cards by grid.

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_grid options, html_options do |cg|
  cd.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)
gutters[integer/hash]The same options as the gutters in the row component
lg[hash]
md[hash]
num[integer]
sm[hash]
target[string](use component stimulus-options method)
turbo[string](use component turbo method)
xl[hash]
xs[hash]

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 grid

The card_grid component is an extension of component element.
Like this one, the card_grid component has options and html_options present as hash.
It inherits options of component element. Card grid inherit from row component.

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

Ruby
Html

ui_card_grid(num: 2, gutters: 4) do |cd|
  cd.card do |c|
    c.image "image.svg"
    c.body 'This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
  end
  cd.card do |c|
    c.image "image.svg"
    c.body 'This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
  end
  cd.card do |c|
    c.image "image.svg"
    c.body 'This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
  end
  cd.card do |c|
    c.image "image.svg"
    c.body 'This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.'
  end
end

<div class="g-4 card-grid row row-cols-md-2">
  <div class="col">
    <div class="card">
      <img class="card-img-top" src="https://picsum.photos/400/200">
      <div class="card-body">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img class="card-img-top" src="https://picsum.photos/400/200">
      <div class="card-body">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img class="card-img-top" src="https://picsum.photos/400/200">
      <div class="card-body">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img class="card-img-top" src="https://picsum.photos/400/200">
      <div class="card-body">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</div>
    </div>
  </div>
</div>