Card(ui_card)

UiBibz::Ui::Core::Boxes::Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

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: {}>

# by variable
ui_card content, options, html_options

# or by block
ui_card options, html_options do
  content
end

# or by block tapped
ui_card options, html_options do |c|
  # by variable
  c.header content, options, html_options
  # or by block
  c.header options, html_options do
    content
  end

  # by variable
  c.body content, options, html_options
  # or by block
  c.body options, html_options do
    content
  end
  # or by block tapped
  c.body options, html_options do |b|
    b.link content, options, html_options
    b.link options, html_options do
      content
    end
  end

  # by variable
  c.footer content, options, html_options
  # or by block
  c.footer options, html_options do
    content
  end

  c.image ''

  # by block tapped
  c.list_group do |lg|
    # by variable
    lg.list content, options, html_options
    # or by block
    lg.list options, html_options do
      content
    end
  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)
outline[boolean](true, false)
status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
target[string](use component stimulus-options method)
text[hash]
- positon[symbol](:left, :center, :right)
- size[symbol](:lg, :md, :sm)(use component size method)
turbo[string](use component turbo method)

Items

The allowed items for this component are:

body(inherit of component)
footer(inherit of component)
header(inherit of component)
html[html/string]Insert html as a component
image(Inherit of component)
list_group(inherit of list_group)
row[content/hash](inherit of row)
- col[content/hash]
  - body(inherit of component)
  - footer(inherit of component)
  - header(inherit of component)
  - html[html/string]Insert html as a component
  - image(inherit of component)
  - list_group(inherit of component)
- html[html/string]Insert html as a component

Examples

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

Card

Content 1

Content 2

Content 3

Ruby
Html

ui_card do
  Content 1
end
 
ui_card "Content3", { status: :info }, { class: "my-card1"}
 
ui_card({ status: :success }, { class: "my-card2"})  do
  "Content 3"
end

<div class="card">
  <div class="card-body">Content 1</div>
</div>

<div class="my-card1 bg-info text-white card">
  <div class="card-body">Content 2</div>
</div>

<div class="my-card2 bg-success text-white card">
  <div class="card-body">Content 3</div>
</div>

Header 1

Content 1

Footer 1

Header 2

Content 2

Footer 2

Header 3

Content 3

Footer 3

Ruby
Html

ui_card do |c|
  c.header "Header 1"
  c.body "Content 1"
  c.footer "Footer"
end
 
ui_card do |c|
  c.header "Header 2", { glyph: "gem" }, { class: "my-header" }
  c.body "Content 2", { glyph: "gem" }, { class: "my-content" }
  c.footer "Footer 2", { muted: true }, { class: 'my-footer'}
end
 
ui_card do |c|
  c.header({ glyph: "gem" }, { class: "my-header" }) do
    'Header 3'
  end
  c.body({ glyph: "gem" }, { class: "my-content" }) do
    "Content 3"
  end
  c.footer({ muted: true }, { class: "my-footer"}) do
    "Footer 3"
  end
end

<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">
  <div class="my-header card-header"><i class="glyph fa fa-gem"></i> Header 2</div>
  <div class="my-content card-body">Content 2</div>
  <div class="my-footer card-footer text-muted">Footer 2</div>
</div>

<div class="card">
  <div class="my-header card-header"><i class="glyph fa fa-gem"></i> Header 3</div>
  <div class="my-content card-body">Content 3</div>
  <div class="my-footer card-footer text-muted">Footer 3</div>
</div>

Image and list group

Card title

Card subtitle

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

Cras justo odio
Dapibas ac facilisis in
vestibulum at eros

Card link Card link

Ruby
Html

ui_card do |c|
  c.image "image.svg"
  c.body do |b|
    b.title "Card title"
    b.subtitle "Card subtitle"
    b.text "Some quick example text to build on the card title and make up the bulk of the card"s content."
  end
  c.list_group do |lg|
    lg.list "Cras justo odio"
    lg.list "Dapibas ac facilisis in"
    lg.list "vestibulum at eros"
  end
  c.body do |b|
    b.link "Card link", url: "#", class: "card-link"
    b.link "Card link", url: "#", class: "card-link"
  end

<div class="card">
  <img src="/assets/image.svg" alt="Image">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group-flush list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibas ac facilisis in</li>
    <li class="list-group-item">vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a class="card-link card-title">Card link</a>
    <a class="card-link card-title">Card link</a>
  </div>
</div>

Body

Items

The allowed items for this component are:

html[html/string]Insert html as a component
link(inherit of link)
subtitle(inherit of component)
text(inherit of component)
title(inherit of component)

Special title treatment

Special subtitle treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Ruby

ui_card do |c|
  c.body do |b|
    b.title "Special title treatment"
    b.subtitle "Special subtitle treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
    b.link "Go somewhere", url: '#go-somewhere', class: 'btn btn-primary'
  end
end

Card row

To use card in horizontal, you must use the row option item.

Card title

Card subtitle

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

Card title

Card subtitle

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

List 1
List 2
List 3
List 4
List 5
List 6

Header card

Card title

Card subtitle

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

Footer card

Left card

Right card

Ruby
Html

<div class="card">
  <div class="g-0 row">
    <div class=" col-md-4"><img class="card-img-left" src="https://picsum.photos/300/100"></div>
    <div class=" col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>
<br>
<div class="card">
  <div class="g-0 row">
    <div class=" col-md-3"><img class="card-img-left" src="https://picsum.photos/300/100"></div>
    <div class=" col-md-6">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class=" col-md-3"><img class="card-img-right" src="https://picsum.photos/300/100"></div>
  </div>
</div>
<br>
<div class="card">
  <div class="g-0 row">
    <div class=" col-md-6">
      <ul class="list-group-flush list-group">
        <li class="list-group-item">List 1</li>
        <li class="list-group-item">List 2</li>
        <li class="list-group-item">List 3</li>
        <li class="list-group-item">List 4</li>
        <li class="list-group-item">List 5</li>
        <li class="list-group-item">List 6</li>
      </ul>
    </div>
    <div class=" col-md-6">
      <div class="card-header">Header card</div>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <div class="card-footer">Footer card</div>
    </div>
  </div>
</div>
<br>
<div class="card">
  <div class="g-0 row">
    <div class="bg-success col-md-4 ">
      <p class="p-auto">Left card</p>
    </div>
    <div class="bg-danger col-md-8 ">
      <p class="p-auto">Right card</p>
    </div>
  </div>
</div>

ui_card do |c|
  c.row gutters: 0 do |r|
    r.col num: 4 do |col|
      col.image "https://picsum.photos/300/100", position: :left
    end
    r.col num: 8 do |col|
      col.body do |b|
        b.title "Card title"
        b.subtitle "Card subtitle"
        b.text "Some quick example text to build on the card title and make up the bulk of the card's content."
      end
    end
  end

  ui_card do |c|
    c.row gutters: 0 do |r|
      r.col num: 3 do |col|
        col.image "https://picsum.photos/300/100", position: :left
      end
      r.col num: 6 do |col|
        col.body do |b|
          b.title "Card title"
          b.subtitle "Card subtitle"
          b.text "Some quick example text to build on the card title and make up the bulk of the card's content."
        end
      end
      r.col num: 3 do |col|
        col.image "https://picsum.photos/300/100", position: :right
      end
    end
  end

  ui_card do |c|
    c.row gutters: 0 do |r|
      r.col num: 6 do |col|
        col.list_group do |gl|
          gl.list "List 1"
          gl.list "List 2"
          gl.list "List 3"
          gl.list "List 4"
          gl.list "List 5"
          gl.list "List 6"
        end
      end
      r.col num: 6 do |col|
        col.header "Header card"
        col.body do |b|
          b.title "Card title"
          b.subtitle "Card subtitle"
          b.text "Some quick example text to build on the card title and make up the bulk of the card's content."
        end
        col.footer "Footer card"
      end
    end
  end

  ui_card do |c|
    c.row gutters: 0 do |r|
      r.col num: 4, class: "bg-success" do
        <p class='p-auto'>Left card</p>
      end
      r.col num: 8, class: "bg-danger" do
        <p class='p-auto'>Right card</p>
      end
    end
  end

Position text

Position are:

:left
:center
:right

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Ruby
Html

ui_card do |c|
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
    b.link "Go somewhere", url: "#go-somewhere", class: "btn btn-primary"
  end
end
 
ui_card text: { position: :center } do |c|
  c.body do |b|
    b.title class: "title" do
      "Special title treatment"
    end
    b.text class: "text" do
      "With supporting text below as a natural lead-in to additional content."
    end
    b.link url: "#go-somewhere", class: "btn btn-primary" do
      "Go somewhere"
    end
  end
end
 
ui_card text: { position: :right, size: :lg } do |c|
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
    b.link "Go somewhere", url: "#go-somewhere", class: "btn btn-primary"
  end
end

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary card-link" href="#go-somewhere">Go somewhere</a>
  </div>
</div>

<div class="card text-md-center">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary card-link" href="#go-somewhere">Go somewhere</a>
  </div>
</div>

<div class="card text-lg-right">
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a class="btn btn-primary card-link" href="#go-somewhere">Go somewhere</a>
  </div>
</div>

ui_card do |c|
  c.header do |h|
    h.tab_group do |n|
      n.tab 'Active', url: '#active', state: :active
      n.tab 'Another link', url: '#active'
      n.tab 'Disabled', url: '#disabled', state: :disabled
      n.spacer
      n.dropdown 'Dropdown' do |d|
        d.link "Action 1", url: '#action'
        d.link url: '#another-action' do
          "Action 2"
        end
        d.link({ url: '#separate-link'}, { class: 'my-link'}) do
          "Action 3"
        end
      end
    end
  end
  c.body ''
end

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="active nav-item">
        <a class="nav-link" href="#active">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#active">Another link</a>
      </li>
      <li class="disabled  me-auto nav-item">
        <a class="disabled nav-link" href="#disabled">Disabled</a>
      </li>
      <li class="dropdown nav-item">
        <a class="dropdown-toggle nav-link active" data-bs-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
        <div class="dropdown-menu" arial-labelledby="dropdown-215166184182764420015994202772620281414" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 42px, 0px); top: 0px; left: 0px; will-change: transform;">
          <a class="dropdown-item" href="#action">Action 1</a>
          <a class="dropdown-item" href="#another-action">Action 2</a>
          <a class="my-link dropdown-item" href="#separate-link">Action 3</a>
        </div>
      </li>
    </ul>
  </div>
  <div class="card-body"></div>
</div>

Status

The status option has following symbols for argument:

:primary
:secondary
:success
:danger
:warning
:info
:light
:dark

Primary Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Primary Footer

Secondary Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Secondary Footer

Success Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Success Footer

Danger Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Danger Footer

Warning Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Warning Footer

Info Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Info Footer

Light Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Light Footer

Dark Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Dark Footer

Ruby
Html

ui_card status: :primary do |c|
  c.header "Primary Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :secondary do |c|
  c.header "Secondary Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :success do |c|
  c.header "Success Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :danger do |c|
  c.header "Danger Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :warning do |c|
  c.header "Warning Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :info do |c|
  c.header "Info Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :light do |c|
  c.header "Light Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :dark do |c|
  c.header "Dark Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

<div class="bg-primary text-white card">
  <div class="card-header">Primary Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Primary Footer</div>
</div>
<div class="bg-secondary text-white card">
  <div class="card-header">Secondary Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Secondary Footer</div>
</div>
<div class="bg-success text-white card">
  <div class="card-header">Success Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Success Footer</div>
</div>
<div class="bg-danger text-white card">
  <div class="card-header">Danger Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Danger Footer</div>
</div>
<div class="bg-warning card">
  <div class="card-header">Warning Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Warning Footer</div>
</div>
<div class="bg-info text-white card">
  <div class="card-header">Info Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Info Footer</div>
</div>
<div class="bg-light card">
  <div class="card-header">Light Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Light Footer</div>
</div>
<div class="bg-dark text-white card">
  <div class="card-header">Dark Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer">Dark Footer</div>
</div>

Outline

Primary Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Primary Footer

Secondary Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Secondary Footer

Success Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Success Footer

Danger Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Danger Footer

Warning Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Warning Footer

Info Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Info Footer

Light Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Light Footer

Dark Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Dark Footer

Ruby
Html

ui_card status: :primary, outline: true do |c|
  c.header "Primary Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :secondary, outline: true do |c|
  c.header "Secondary Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :success, outline: true do |c|
  c.header "Success Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :danger, outline: true do |c|
  c.header "Danger Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :warning, outline: true do |c|
  c.header "Warning Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :info, outline: true do |c|
  c.header "Info Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :light, outline: true do |c|
  c.header "Light Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

ui_card status: :dark, outline: true do |c|
  c.header "Dark Header"
  c.body do |b|
    b.title "Special title treatment"
    b.text "With supporting text below as a natural lead-in to additional content."
  end
end

<div class="border-primary text-white card bg-transparent">
  <div class="card-header text-primary border-primary bg-transparent">Primary Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-primary border-primary bg-transparent">Primary Footer</div>
</div>
<div class="border-secondary text-white card bg-transparent">
  <div class="card-header text-secondary border-secondary bg-transparent">Secondary Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-secondary border-secondary bg-transparent">Secondary Footer</div>
</div>
<div class="border-success text-white card bg-transparent">
  <div class="card-header text-success border-success bg-transparent">Success Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-success border-success bg-transparent">Success Footer</div>
</div>
<div class="border-danger text-white card bg-transparent">
  <div class="card-header text-danger border-danger bg-transparent">Danger Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-danger border-danger bg-transparent">Danger Footer</div>
</div>
<div class="border-warning card bg-transparent">
  <div class="card-header text-warning border-warning bg-transparent">Warning Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-warning border-warning bg-transparent">Warning Footer</div>
</div>
<div class="border-info text-white card bg-transparent">
  <div class="card-header text-info border-info bg-transparent">Info Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-info border-info bg-transparent">Info Footer</div>
</div>
<div class="border-light card bg-transparent">
  <div class="card-header text-light border-light bg-transparent">Light Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-light border-light bg-transparent">Light Footer</div>
</div>
<div class="border-dark text-white card bg-transparent">
  <div class="card-header text-dark border-dark bg-transparent">Dark Header</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
  <div class="card-footer text-dark border-dark bg-transparent">Dark Footer</div>
</div>