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]
  • options[hash]<default: {}>
  • html_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 with tap
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 with tap
  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 with tap
  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:
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • text[hash]
    • positon[symbol](:left, :center, :right)
    • size[symbol](:lg, :md, :sm)(use component size method)
  • outline[boolean](true, false)
  • tap[boolean]Required (if you want add header, body or footer item.)
  • cache[string](use can cache your component
  • controller[string](use component stimulus-options method)
  • action[string](use component stimulus-options method)
  • target[string](use component stimulus-options method)

Items

The allowed items for this component are:

Examples

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

Card

Content 1

Content 2

Content 3
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>

Tap option: To add a block type, you must add tap: true to the card options.

Header 1
Content 1
Header 2
Content 2
Header 3
Content 3
ui_card tap: true do |c|
  c.header "Header 1"
  c.body "Content 1"
  c.footer "Footer"
end
 
ui_card tap: true 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 tap: true 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

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
ui_card tap: true do |c|
  c.image "image.svg"
  c.body tap: true do |b|
    b.title "Card title"
    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 tap: true 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>
    <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:

Special title treatment

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

Go somewhere
ui_card tap: true do |c|
  c.body tap: true 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

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
ui_card tap: true do |c|
  c.body tap: true 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 tap: true, text: { position: :center } do |c|
  c.body tap: true 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 tap: true, text: { position: :right, size: :lg } do |c|
  c.body tap: true 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>

Card Navigation

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.

Secondary Header

Special title treatment

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

Success Header

Special title treatment

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

Danger Header

Special title treatment

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

Warning Header

Special title treatment

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

Info Header

Special title treatment

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

Light Header

Special title treatment

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

Dark Header

Special title treatment

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

ui_card tap: true, status: :primary do |c|
  c.header "Primary Header"
  c.body tap: true 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 tap: true, status: :secondary do |c|
  c.header "Secondary Header"
  c.body tap: true 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 tap: true, status: :success do |c|
  c.header "Success Header"
  c.body tap: true 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 tap: true, status: :danger do |c|
  c.header "Danger Header"
  c.body tap: true 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 tap: true, status: :warning do |c|
  c.header "Warning Header"
  c.body tap: true 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 tap: true, status: :info do |c|
  c.header "Info Header"
  c.body tap: true 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 tap: true, status: :light do |c|
  c.header "Light Header"
  c.body tap: true 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 tap: true, status: :dark do |c|
  c.header "Dark Header"
  c.body tap: true 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.

Secondary Header

Special title treatment

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

Success Header

Special title treatment

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

Danger Header

Special title treatment

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

Warning Header

Special title treatment

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

Info Header

Special title treatment

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

Light Header

Special title treatment

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

Dark Header

Special title treatment

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

ui_card tap: true, status: :primary, outline: true do |c|
  c.header "Primary Header"
  c.body tap: true 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 tap: true, status: :secondary, outline: true do |c|
  c.header "Secondary Header"
  c.body tap: true 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 tap: true, status: :success, outline: true do |c|
  c.header "Success Header"
  c.body tap: true 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 tap: true, status: :danger, outline: true do |c|
  c.header "Danger Header"
  c.body tap: true 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 tap: true, status: :warning, outline: true do |c|
  c.header "Warning Header"
  c.body tap: true 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 tap: true, status: :info, outline: true do |c|
  c.header "Info Header"
  c.body tap: true 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 tap: true, status: :light, outline: true do |c|
  c.header "Light Header"
  c.body tap: true 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 tap: true, status: :dark, outline: true do |c|
  c.header "Dark Header"
  c.body tap: true 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>