Testimonial

Description

Display endorsements or feedback from clients or users, providing social proof and credibility of your product or service

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
`name`		`String`	The name of the testimonial author.
`role`		`String`	The role of the testimonial author.
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<div class="row g-4">
  <div class="col-sm-6 col-md-4">
    <%= render Railsboot::TestimonialComponent.new(name: "John Doe", role: "CEO and Founder", class: "h-100") do |testimonial| %>
      <% testimonial.with_quote do %>
        Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.
      <% end %>
      <% testimonial.with_image do %>
        <%= render Railsboot::AvatarComponent.new(src: "public/avatar/1.jpg", size: 50) %>
      <% end %>
    <% end %>
  </div>
  <div class="col-sm-6 col-md-4">
    <%= render Railsboot::TestimonialComponent.new(name: "Mike Smith", role: "CTO and Co-Founder", class: "h-100") do |testimonial| %>
      <% testimonial.with_quote do %>
        Voluptas quos itaque ipsam in voluptatem est. Iste eos blanditiis repudiandae. Earum deserunt enim molestiae ipsum perferendis.
      <% end %>
      <% testimonial.with_image do %>
        <%= render Railsboot::AvatarComponent.new(src: "public/avatar/2.jpg", size: 50) %>
      <% end %>
    <% end %>
  </div>
  <div class="col-sm-12 col-md-4">
    <%= render Railsboot::TestimonialComponent.new(name: "Sandra Mitchell", role: "Lead Designer", class: "h-100") do |testimonial| %>
      <% testimonial.with_quote do %>
        Consequatur ut atque. Itaque nostrum molestiae id veniam eos cumque.
      <% end %>
      <% testimonial.with_image do %>
        <%= render Railsboot::AvatarComponent.new(src: "public/avatar/3.jpg", size: 50) %>
      <% end %>
    <% end %>
  </div>
</div>

<div class="row g-4">
  <div class="col-sm-6 col-md-4">
    <div class="card bg-primary bg-opacity-5 border-0 h-100">
      <div class="card-body">    
        <div class="d-flex align-items-start gap-4">
          <div class="flex-shrink-0 text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="36" fill="none">
              <path fill="currentColor" d="M.2 16.7 6.9.9h7.8l-4.4 15.8h5.4v14.4H.2V16.7Zm20 14.4V16.7L26.9.9h7.8l-4.4 15.8h5.4v14.4H20.2Z" />
            </svg>
          </div>
          <div class="flex-grow-1 text-body-secondary">        Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.
          </div>
        </div>
      </div>
      <div class="card-footer d-flex gap-3 border-0 bg-transparent">      
        <div>          
          <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 50px; height: 50px; box-sizing: content-box;">
            <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/1-0e38f189533d5684d22d51f8343519b16e4ba323454de5a3b9e8a50fe4be1ef2.jpg" width="50" height="50" />
          </div>
        </div>
        <div class="d-flex flex-column fw-bold">
          <p class="m-0">John Doe</p>
          <p class="text-primary m-0">CEO and Founder</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="card bg-primary bg-opacity-5 border-0 h-100">
      <div class="card-body">    
        <div class="d-flex align-items-start gap-4">
          <div class="flex-shrink-0 text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="36" fill="none">
              <path fill="currentColor" d="M.2 16.7 6.9.9h7.8l-4.4 15.8h5.4v14.4H.2V16.7Zm20 14.4V16.7L26.9.9h7.8l-4.4 15.8h5.4v14.4H20.2Z" />
            </svg>
          </div>
          <div class="flex-grow-1 text-body-secondary">        Voluptas quos itaque ipsam in voluptatem est. Iste eos blanditiis repudiandae. Earum deserunt enim molestiae ipsum perferendis.
          </div>
        </div>
      </div>
      <div class="card-footer d-flex gap-3 border-0 bg-transparent">      
        <div>          
          <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 50px; height: 50px; box-sizing: content-box;">
            <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/2-418080169b8fc440a2f1f5222a5b72eddbdf1a750c0f3fb4ddf01bf0b1a82210.jpg" width="50" height="50" />
          </div>
        </div>
        <div class="d-flex flex-column fw-bold">
          <p class="m-0">Mike Smith</p>
          <p class="text-primary m-0">CTO and Co-Founder</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-4">
    <div class="card bg-primary bg-opacity-5 border-0 h-100">
      <div class="card-body">    
        <div class="d-flex align-items-start gap-4">
          <div class="flex-shrink-0 text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="36" fill="none">
              <path fill="currentColor" d="M.2 16.7 6.9.9h7.8l-4.4 15.8h5.4v14.4H.2V16.7Zm20 14.4V16.7L26.9.9h7.8l-4.4 15.8h5.4v14.4H20.2Z" />
            </svg>
          </div>
          <div class="flex-grow-1 text-body-secondary">        Consequatur ut atque. Itaque nostrum molestiae id veniam eos cumque.
          </div>
        </div>
      </div>
      <div class="card-footer d-flex gap-3 border-0 bg-transparent">      
        <div>          
          <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 50px; height: 50px; box-sizing: content-box;">
            <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/3-c7d1dc546cf5030d37d03587546e5e9fde59fd946325d77565b995d49e24506b.jpg" width="50" height="50" />
          </div>
        </div>
        <div class="d-flex flex-column fw-bold">
          <p class="m-0">Sandra Mitchell</p>
          <p class="text-primary m-0">Lead Designer</p>
        </div>
      </div>
    </div>
  </div>
</div>

Slots

quote Railsboot::Testimonial::QuoteComponent

Slot for testimonial quote.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

image Railsboot::Testimonial::ImageComponent

Slot for custom image content, representing the testimonial author.

Name	Default	Type	Description
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

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/testimonial_component.rb).
A view template (app/components/railsboot/testimonial_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/testimonial_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.

Team Member Toast