2.1
Getting Started
API
Card
The Bootstrap
card component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.bs_card(*args, &block)
bs_card(*args, &block)Returns a bootstrap card containing text or content specified by a block. Also the card is customizable with the following options.
Optional options
header- Expects a string or a hash withclassandtextas possible keys, that should go inside the header componentfooter- Expects a string or a hash withclassandtextas possible keys, that should go inside the footer componentbody- Expects a string or a hash withclassandtextas possible keys, with the text that should go inside the card-body componenttitle- additional to the body text, you can add a string as title with pre-defined heading size (h5)subtitle- additional to the body text, you can add a string as subtitle with pre-defined heading size (h6)img_path- Insert an image component into the card body by giving the image pathimg_pos- Expects:bottomor:top. This parameter will set the placement of the image in the bottom of the card component. By default it's set as top imagealt_text- Expects a string for image's alt-textslots- Using slots to yield custom components in card components forheader,footerorbody- Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding card div.
Examples
Example 1: Basic example with simple body, footer and header text
1
bs_card img_path: image_url("...png"),
2
title: "Card title", body: "Some quick example text",
3
header: "Card Header", footer: "Card Footer"
Copied!
returns
1
<div class="card">
2
<div class="card-header">
3
Card Header
4
</div>
5
<img src="..." class="card-img-top" alt="...">
6
<div class="card-body">
7
<h5 class="card-title">Card title</h5>
8
<p class="card-text">Some quick example text</p>
9
</div>
10
<div class="card-footer">
11
Card Footer
12
</div>
13
</div>
Copied!
Example 2: Example with body and header as a hash
1
bs_card body: "Some quick example text",
2
header: { text: "Card header hash", class: "text-center h3" }
Copied!
returns
1
<div class="card">
2
<div class="card-header text-center h3">
3
Card header hash
4
</div>
5
<div class="card-body">
6
<p class="card-text">Some quick example text</p>
7
</div>
8
</div>
Copied!
Example 3: Using Slots for customize card body
1
bs_card slots: { body: method(:my_card_body) }
2
​
3
def my_card_body
4
ul class: 'list-group list-group-flush' do
5
li class: "list-group-item" do plain "Item 1" end
6
li class: "list-group-item" do plain "Item 2" end
7
li class: "list-group-item" do plain "Item 3" end
8
end
9
a "Card link", class: 'btn btn-link', path: "#"
10
a "Another link", class: 'btn btn-link', path: "#"
11
end
Copied!
returns
1
<div class="card">
2
<img src="..." class="card-img-top" alt="...">
3
<div class="card-body">
4
<h5 class="card-title">Card title</h5>
5
<p class="card-text">Some quick example text</p>
6
</div>
7
<ul class="list-group list-group-flush">
8
<li class="list-group-item">Item 1</li>
9
<li class="list-group-item">Item 2</li>
10
<li class="list-group-item">Item 3</li>
11
</ul>
12
<div class="card-body">
13
<a href="#" class="card-link">Card link</a>
14
<a href="#" class="card-link">Another link</a>
15
</div>
16
</div>
Copied!
Example 4: Using Slots for customize card header and footer
1
bs_card body: "With supporting text below.", title: "Special title treatment",
2
slots: { header: method(:my_card_header), footer: method(:my_card_footer) }, class: "text-center"
3
​
4
def my_card_header
5
ul class: "nav nav-tabs card-header-tabs" do
6
li class: "nav-item" do
7
a "Tab 1", class: "nav-link", path: "#"
8
end
9
li class: "nav-item" do
10
a "Tab 2", class: "nav-link", path: "#"
11
end
12
end
13
end
14
​
15
def my_card_footer
16
plain "2 days ago"
17
end
Copied!
returns
1
<div class="card text-center">
2
<div class="card-header">
3
<ul class="nav nav-tabs card-header-tabs">
4
<li class="nav-item">
5
<a class="nav-link" href="#">Tab 1</a>
6
</li>
7
<li class="nav-item">
8
<a class="nav-link" href="#">Tab 2</a>
9
</li>
10
</ul>
11
</div>
12
<div class="card-body">
13
<h5 class="card-title">Special title treatment</h5>
14
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
15
</div>
16
<div class="card-footer">
17
2 days ago
18
</div>
19
</div>
Copied!
Example 5: Yield a given block
Point of attention: Custom Component will be yield outside of the
card-body tag.1
bs_card title: "Card title", body: "Some quick example text" do
2
div class: "p-3" do
3
bs_btn "Card Button"
4
bs_btn "Another Button"
5
end
6
end
Copied!
returns
1
<div class="card">
2
<div class="card-body">
3
<h5 class="card-title">Card title</h5>
4
<p class="card-text">Some quick example text</p>
5
</div>
6
<div class="p-3">
7
<button type="button" class="btn btn-primary">Card Button</button>
8
<button type="button" class="btn btn-primary">Another Button</button>
9
</div>
10
</div>
Copied!
Last modified 4mo ago