- Accordion
- Alert
- Avatar PRO
- Avatar Group PRO
- Badge
- Blank Slate PRO
- Breadcrumb
- Breakpoint Debug PRO
- Button
- Button Group
- Callout PRO
- Card
- Carousel
- Close Button
- Container
- Copy to Clipboard PRO
- Divider PRO
- Dropdown
- Errors PRO
- Feed PRO
- Flash PRO
- Form Field PRO
- Header PRO
- Heading
- Heading with Anchor PRO
- List Group
- Modal
- Nav
- Navbar
- Offcanvas
- Pagination
- Pricing Panel PRO
- Progress
- Progress Circular PRO
- Rating Group PRO
- Ribbon PRO
- Spinner
- Stat PRO
- Stepper PRO
- Table
- Table of Contents PRO
- Team Member PRO
- Testimonial PRO
- Toast
Pricing Panel
Description
Panel to display pricing information.
PRO
This component is part of our professional component suite. See the installation instructions below for more on how to use it.
Arguments
| Name | Default | Type | Description |
|---|---|---|---|
html_attributes
|
{}
|
Hash
|
Any attributes for the used html wrapper tag |
Examples
Default
<div class="row g-4 mt-2">
<div class="col-sm-12 col-md-4">
<%= render Railsboot::PricingPanelComponent.new(class: "h-100") do |pricing_panel| %>
<% pricing_panel.with_badge.with_content("Recommended") %>
<% pricing_panel.with_heading(size: "h3") { "Premium Product" } %>
<% pricing_panel.with_teaser { "Use our Premium product to be fully happy" } %>
<% pricing_panel.with_advantage { "Best product in town" } %>
<% pricing_panel.with_advantage { "You will love it" } %>
<% pricing_panel.with_advantage { "Customizable" } %>
<% pricing_panel.with_disadvantage { "No phone support" } %>
<% pricing_panel.with_runtime { "monthly" } %>
<% pricing_panel.with_price { "500 $" } %>
<% pricing_panel.with_action do %>
<%= render Railsboot::Button::LinkComponent.new(text: "Buy now", href: "#", variant: "primary") %>
<% end %>
<% end %>
</div>
<div class="col-sm-6 order-md-first col-md-4">
<%= render Railsboot::PricingPanelComponent.new(class: "h-100") do |pricing_panel| %>
<% pricing_panel.with_heading(size: "h3") { "Small Product" } %>
<% pricing_panel.with_teaser { "Use our Small product to be semi happy" } %>
<% pricing_panel.with_advantage { "Good product in town" } %>
<% pricing_panel.with_advantage { "You will love it" } %>
<% pricing_panel.with_advantage { "Customizable" } %>
<% pricing_panel.with_disadvantage { "No phone support" } %>
<% pricing_panel.with_runtime { "monthly" } %>
<% pricing_panel.with_price { "100 $" } %>
<% pricing_panel.with_action do %>
<%= render Railsboot::Button::LinkComponent.new(text: "Buy now", href: "#", outline: true, variant: "primary") %>
<% end %>
<% end %>
</div>
<div class="col-sm-6 col-md-4">
<%= render Railsboot::PricingPanelComponent.new(class: "h-100") do |pricing_panel| %>
<% pricing_panel.with_heading(size: "h3") { "Enterprise Product" } %>
<% pricing_panel.with_teaser { "Use our Enterprise product to be fully happy" } %>
<% pricing_panel.with_advantage { "Best product in town" } %>
<% pricing_panel.with_advantage { "You will love it" } %>
<% pricing_panel.with_advantage { "Customizable" } %>
<% pricing_panel.with_advantage { "phone support" } %>
<% pricing_panel.with_runtime { "monthly" } %>
<% pricing_panel.with_price { "900 $" } %>
<% pricing_panel.with_action do %>
<%= render Railsboot::Button::LinkComponent.new(text: "Buy now", href: "#", outline: true, variant: "primary") %>
<% end %>
<% end %>
</div>
</div>
<div class="row g-4 mt-2">
<div class="col-sm-12 col-md-4">
<div class="card relative h-100">
<div class="position-absolute top-0 start-50 translate-middle">
<span class="badge bg-primary">Recommended</span>
</div>
<div class="card-body">
<div>
<div>
<div class="text-center border-bottom py-3">
<h2 html_attributes="" class="h3">
Premium Product
</h2>
</div>
<p class="text-center border-bottom py-2">Use our Premium product to be fully happy</p>
<ul class="pb-4 border-bottom border-dashed">
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">Best product in town</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">You will love it</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">Customizable</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-dark flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" />
</svg>
<span class="ps-2">No phone support</span>
</li>
</ul>
</div>
<div>
<div class="text-center text-secondary">
<div class="fw-bold mb-2">
monthly
</div>
<div class="h4">
500 $
</div>
</div>
<div class="d-flex justify-content-center mt-4">
<a class="btn btn-primary" href="#">
Buy now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 order-md-first col-md-4">
<div class="card relative h-100">
<div class="card-body">
<div>
<div>
<div class="text-center border-bottom py-3">
<h2 html_attributes="" class="h3">
Small Product
</h2>
</div>
<p class="text-center border-bottom py-2">Use our Small product to be semi happy</p>
<ul class="pb-4 border-bottom border-dashed">
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">Good product in town</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">You will love it</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">Customizable</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-dark flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" />
</svg>
<span class="ps-2">No phone support</span>
</li>
</ul>
</div>
<div>
<div class="text-center text-secondary">
<div class="fw-bold mb-2">
monthly
</div>
<div class="h4">
100 $
</div>
</div>
<div class="d-flex justify-content-center mt-4">
<a class="btn btn-outline-primary" href="#">
Buy now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card relative h-100">
<div class="card-body">
<div>
<div>
<div class="text-center border-bottom py-3">
<h2 html_attributes="" class="h3">
Enterprise Product
</h2>
</div>
<p class="text-center border-bottom py-2">Use our Enterprise product to be fully happy</p>
<ul class="pb-4 border-bottom border-dashed">
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">Best product in town</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">You will love it</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">Customizable</span>
</li>
<li class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="ps-2">phone support</span>
</li>
</ul>
</div>
<div>
<div class="text-center text-secondary">
<div class="fw-bold mb-2">
monthly
</div>
<div class="h4">
900 $
</div>
</div>
<div class="d-flex justify-content-center mt-4">
<a class="btn btn-outline-primary" href="#">
Buy now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Installation
Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:
- A parent component class (
app/components/railsboot/component.rb) of which all components inherit from. - A base component class (
app/components/railsboot/base_component.rb) which is used for rendering internally. - The desired component itself (
app/components/railsboot/pricing_panel_component.rb). - A view template (
app/components/railsboot/pricing_panel_component.html.erb) for the component unless it's rendered inline. - Any other dependent components such as Slots (just if the component needs those)
- Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
- A test file for the components (
test/components/railsboot/pricing_panel_component_test.rb) including potential slot or dependency tests.
For more information please refer to the installation section.
Download
Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.
Get access
You need to purchase a professional license to download this component.