Card(ui_card)Bootstrap Logo

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)
  • tabbed[boolean](true, false)To link tab_group in the header with the card bodies
  • target[string](use component stimulus-options method)
  • text[hash]
    • positon[symbol](:left, :center, :right)
    • size[symbol](:lg, :md, :sm)(use component size method)
  • turbolinks[string](use component turbolinks 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)
    • pack[boolean]Use image_pack_tag instead of image_tag.
  • list_group(inherit of list_group)
  • row[content/hash](inherit of row)
    • col[content/hash]
    • 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
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
Header 2
Content 2
Header 3
Content 3
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
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:
Special title treatment
Special subtitle treatment

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

Go somewhere
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.

image 1
Card title
Card subtitle

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


image 2
Card title
Card subtitle

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

image 3

  • 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.


Left card

Right card

<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 4 do |col|
      col.image "https://picsum.photos/300/100", position: :left
    end
    r.col 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 3 do |col|
        col.image "https://picsum.photos/300/100", position: :left
      end
      r.col 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 3 do |col|
        col.image "https://picsum.photos/300/100", position: :right
      end
    end
  end

  ui_card do |c|
    c.row gutters: 0do |r|
      r.col 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 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
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>

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 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.

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

Card tabs

ui_card tabbed: true do |c|
  c.header do |h|
    h.tab_group do |n|
      n.tab 'Active', url: '#active', state: :active
      n.tab 'Another link', url: '#another'
      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 "Active Pane", tab_pane: 'active', state: :active
  c.body "Another Pane", tab_pane: 'another'
  c.body "Disable Pane", tab_pane: 'disabled'
end
<div class="card tab-content">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
      <li class="nav-item"><a href="#active" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">Active</a></li>
      <li class="nav-item"><a href="#another" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">Another link</a></li>
      <li class="me-auto nav-item"><a href="#disabled" class="disabled nav-link" data-bs-toggle="tab" role="tab">Disabled</a></li>
      <li class="dropdown nav-item">
        <a class="dropdown-toggle nav-link" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" arial-labelledby="dropdown-20969">
          <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 tab-pane" id="active">
    Active Pane
  </div>
  <div class="card-body tab-pane active" id="another">
    Another Pane
  </div>
  <div class="card-body tab-pane" id="disabled">
    Disable Pane
  </div>
</div>

Complexe example

To create a card with a table inside you could easily use the card_table component. But Ui Bibz allow to be more flexible and create your own card table like this:

IdEmail
1Personal: test0@test.com
2Personal: test1@test.com
3Personal: test2@test.com
4Personal: test3@test.com
5Personal: test4@test.com

Id 1 | Email test0@test.com

Id 2 | Email test1@test.com

Id 3 | Email test2@test.com

Id 4 | Email test3@test.com

Id 5 | Email test4@test.com

ui_card tabbed: true, class: "table-card" do |c|
  c.header do |h|
    h.tab_group do |n|
      n.tab "Table", url: "#table-pane", glyph: "table", state: :active
      n.tab "Grid", url: "#grid-pane", glyph: "th", class: "me-auto"
      n.html do
        ui_table_search_field store: @users
      end
    end
  end

  c.body tab_pane: "table-pane", state: :active do
    ui_table store: @users do |b|
      b.columns do |cls|
        cls.column :id, sortable: false
        cls.column :email, format: lambda { |records, record| "Personal: #\{record.email }" }
      end
      b.actions do |acs|
        acs.link "See"
      end
    end
  end

  c.body tab_pane: "grid-pane" do
    ui_row do
      @users.records.each do |record|
        ui_col class: "text-center" do
          image_pack_tag "bootstrap-icon.png"
          <p class="description">
            <b>Id</b> record.id
            |
            <b>Email</b> record.email
          </p>
        end
      end
    end
  end

  c.footer do |f|
    ui_table_pagination store: @users
    .ms-auto= ui_table_pagination_per_page store: @users
  end
end
<div class="table-card tab-content card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
      <li class="nav-item">
        <a href="#table-pane" class="active nav-link" data-bs-toggle="tab" role="tab"><i class="glyph fas fa-table"></i> Table</a>
      </li>
      <li class="me-auto nav-item">
        <a href="#grid-pane" class="me-auto nav-link" data-bs-toggle="tab" role="tab"><i class="glyph fas fa-th"></i> Grid</a>
      </li>
      <form class="form-table-search-field" action="/components/boxes/card" accept-charset="UTF-8" method="get" data-dashlane-rid="e54b90af7125f3c3" data-form-type="">
        <div class="input-group input-group-sm table-search-field">
          <span class="input-group-text"><i class="glyph fas fa-search"></i></span>
          <input type="hidden" name="store_id" value="components/boxes">
          <input type="hidden" name="link_type" value="search">
          <input type="search" name="search" class="form-control" placeholder="Search by Email..." data-dashlane-rid="5a70c6d46822517a" data-form-type="">
          <button type="button" class="btn btn-secondary input-group-btn clear-search-btn" data-dashlane-rid="2c8f862b853fdc71" data-form-type="" data-dashlane-label="true">
            <i class="glyph fas fa-times-circle"></i>
            <span class="visually-hidden">Clear Search</span>
          </button>
        </div>
      </form>
    </ul>
  </div>
  <div class="active card-body tab-pane" id="table-pane">
    <table class="table">
      <thead>
        <tr>
          <th>
            <a class="dropup" href="/components/boxes/card?column_id=id&amp;direction=asc&amp;link_type=column&amp;sort=users.id&amp;store_id=components%2Fboxes">Id</a>
          </th>
          <th>
            <a class="dropup" href="/components/boxes/card?column_id=email&amp;direction=asc&amp;link_type=column&amp;sort=users.email&amp;store_id=components%2Fboxes">Email</a>
          </th>
          <th class="action"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            1
          </td>
          <td>
            Personal: test0@test.com
          </td>
          <td>
            <div class="dropdown-action dropdown">
              <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown-45280"><i class="glyph fas fa-ellipsis-v fa-fw"></i> Actions</button>
              <div class="dropdown-menu" arial-labelledby="dropdown-45280">
                <a class="dropdown-item" href="#">See</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            2
          </td>
          <td>
            Personal: test1@test.com
          </td>
          <td>
            <div class="dropdown-action dropdown">
              <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown-87773"><i class="glyph fas fa-ellipsis-v fa-fw"></i> Actions</button>
              <div class="dropdown-menu" arial-labelledby="dropdown-87773">
                <a class="dropdown-item" href="#">See</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            3
          </td>
          <td>
            Personal: test2@test.com
          </td>
          <td>
            <div class="dropdown-action dropdown">
              <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown-97655"><i class="glyph fas fa-ellipsis-v fa-fw"></i> Actions</button>
              <div class="dropdown-menu" arial-labelledby="dropdown-97655">
                <a class="dropdown-item" href="#">See</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            4
          </td>
          <td>
            Personal: test3@test.com
          </td>
          <td>
            <div class="dropdown-action dropdown">
              <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown-12415"><i class="glyph fas fa-ellipsis-v fa-fw"></i> Actions</button>
              <div class="dropdown-menu" arial-labelledby="dropdown-12415">
                <a class="dropdown-item" href="#">See</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            5
          </td>
          <td>
            Personal: test4@test.com
          </td>
          <td>
            <div class="dropdown-action dropdown">
              <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="dropdown-19500"><i class="glyph fas fa-ellipsis-v fa-fw"></i> Actions</button>
              <div class="dropdown-menu" arial-labelledby="dropdown-19500">
                <a class="dropdown-item" href="#">See</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="card-body tab-pane" id="grid-pane">
    <div class="row">
      <div class="text-center col">
        <img src="/packs/media/images/bootstrap-icon-6040c3f32c3b518c69e4385fd6237ab6.png">
        <p class="description">
          <b>Id</b>
          1|
          <b>Email</b>
          test0@test.com
        </p>
      </div>
      <div class="text-center col">
        <img src="/packs/media/images/bootstrap-icon-6040c3f32c3b518c69e4385fd6237ab6.png">
        <p class="description">
          <b>Id</b>
          2|
          <b>Email</b>
          test1@test.com
        </p>
      </div>
      <div class="text-center col">
        <img src="/packs/media/images/bootstrap-icon-6040c3f32c3b518c69e4385fd6237ab6.png">
        <p class="description">
          <b>Id</b>
          3|
          <b>Email</b>
          test2@test.com
        </p>
      </div>
      <div class="text-center col">
        <img src="/packs/media/images/bootstrap-icon-6040c3f32c3b518c69e4385fd6237ab6.png">
        <p class="description">
          <b>Id</b>
          4|
          <b>Email</b>
          test3@test.com
        </p>
      </div>
      <div class="text-center col">
        <img src="/packs/media/images/bootstrap-icon-6040c3f32c3b518c69e4385fd6237ab6.png">
        <p class="description">
          <b>Id</b>
          5|
          <b>Email</b>
          test4@test.com
        </p>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <nav class="pagination">
      <ul class="pagination" role="group">
        <li class="previous page-item disabled"><span class="page-link">«</span></li>
        <li class="page-item active"><span class="page-link">1</span></li>
        <li class="page-item"><a class="page-link" rel="next" href="/components/boxes/card?page=2&amp;store_id=components%2Fboxes">2</a></li>
        <li class="next page-item"><a class="page-link" rel="next" href="/components/boxes/card?page=2&amp;store_id=components%2Fboxes">»</a></li>
      </ul>
    </nav>
    <div class="ms-auto">
      <form action="/components/boxes/card" accept-charset="UTF-8" method="get">
        <div class="table-pagination-per-page">
          Displaying User
          <b>1&nbsp;-&nbsp;5</b>
           of
          <b>10</b>
           in total | Per page:
          <select name="per_page" id="per_page" class="form-select">
            <option selected="selected" value="5">5</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="200">200</option>
            <option value="500">500</option>
          </select>
          <input type="hidden" name="store_id" value="components/boxes">
        </div>
      </form>
    </div>
  </div>
</div>