Card deck(ui_card_deck)

UiBibz::Ui::Core::Boxes::CardDeck
These elements allow the placement of the cards by deck.

Usage

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

ui_card_deck options, html_options do |cd|
  cd.card do
    content
  end
end

Items

The allowed items for this component are:
  • card(inherit of card)

Examples

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

Card deck

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

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.

Someone famous in Source Title
 
ui_card_deck do |cd|
  cd.card tap: true do |c|
    c.header "header 1"
    c.body "content 1"
    c.footer "footer 1"
  end
  cd.card tap: true do |c|
    c.image "image.svg"
    c.body tap: true 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
  cd.card tap: true do |c|
    c.list_group do |lg|
      lg.list "Cras justo odio"
      lg.list "Dapibas ac facilisis in", state: :active
      lg.list tap: true do |l|
        l.header "Header list"
        l.body "vestibulum at eros"
      end
    end
  end
  cd.card "Content 4 <br/> Some quick example text to build on the card title and make up the bulk of the card's content."
  cd.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>
  end
end

<div class="card-deck-wrapper">
  <div class="card-deck">
    <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>
</div>

Contents