Ui Bibz - Card

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 to 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:

header(inherit of component)
body(inherit of component)
footer(inherit of component)
image(inherit of component)
list_group(inherit of list_group)

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

Footer 1

Header 2

Content 2

Footer 2

Header 3

Content 3

Footer 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

Card link Card link

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:

title(inherit of component)
text(inherit of component)
link(inherit of link)

Special title treatment

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

Go somewhere

Ruby

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 tabs

ui_card tap: true do |c|
  c.header tap: true do |h|
    h.tab_group tap: true 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  mr-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-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

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.

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

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>

Card(ui_card)

Usage

Options

Items

Examples

Card

Image and list group

Card title

Body

Items

Special title treatment

Position text

Special title treatment

Special title treatment

Special title treatment

Card tabs

Status

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Outline

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Contents