Docs

Testimonial

Use the testimonial shortcode to display a quote with attribution.
Overview   Basic Testimonial   Testimonial With Avatar   Testimonial With Logo   Testimonial With Icon   Horizontal Orientation   Colored Testimonial   Testimonial With Case Study   Styling   Arguments  

Overview  

Use the testimonial shortcode to display a quote with attribution. The testimonial supports a contact name, role, avatar image, logo, or icon. You can optionally link the contact name to a URL and add a call-to-action link.

Basic Testimonial  

Provide inner content as the quote.

Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.
markdown 
{{< testimonial >}}
  Hinode has transformed the way we publish documentation. It is fast, flexible,
  and a joy to use.
{{< /testimonial >}}

Testimonial With Avatar  

Add image to display a circular avatar next to the contact name.

Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.
Jane Smith
Jane Smith
CEO, Acme Corp
markdown 
{{< testimonial contact="Jane Smith" role="CEO, Acme Corp"
    image="/img/placeholder.png" >}}
  Hinode has transformed the way we publish documentation. It is fast, flexible,
  and a joy to use.
{{< /testimonial >}}

Use logo to display a company or brand logo above the quote.

Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.
Jane Smith
Jane Smith
CEO, Acme Corp
markdown 
{{< testimonial contact="Jane Smith" role="CEO, Acme Corp"
    image="/img/placeholder.png" logo="/img/placeholder.png" >}}
  Hinode has transformed the way we publish documentation. It is fast, flexible,
  and a joy to use.
{{< /testimonial >}}

Testimonial With Icon  

Use icon instead of logo to display a Font Awesome icon above the quote. Use icon-style to adjust the icon size.

Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.
markdown 
{{< testimonial contact="Jane Smith" role="CEO, Acme Corp"
    icon="fas quote-left" icon-style="fa-3x" >}}
  Hinode has transformed the way we publish documentation. It is fast, flexible,
  and a joy to use.
{{< /testimonial >}}

Horizontal Orientation  

Set orientation to horizontal to display the avatar in a column to the left of the quote instead of inline below it.

Jane Smith
Jane Smith
CEO, Acme Corp
Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.
markdown 
{{< testimonial contact="Jane Smith" role="CEO, Acme Corp"
    image="/img/placeholder.png" orientation="horizontal" >}}
  Hinode has transformed the way we publish documentation. It is fast, flexible,
  and a joy to use.
{{< /testimonial >}}

Colored Testimonial  

Use color to apply a Bootstrap theme color as the background.

Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.
Jane Smith
Jane Smith
CEO, Acme Corp
markdown 
{{< testimonial contact="Jane Smith" role="CEO, Acme Corp"
    image="/img/placeholder.png" color="primary" padding="4" >}}
  Hinode has transformed the way we publish documentation. It is fast, flexible,
  and a joy to use.
{{< /testimonial >}}

Testimonial With Case Study  

Use link to add a call-to-action button pointing to a case study.

Hinode has transformed the way we publish documentation. It is fast, flexible, and a joy to use.
View client case     
markdown 
{{< testimonial 
    image="/img/placeholder.png"
    link="https://example.com/case-study" >}}
  Hinode has transformed the way we publish documentation. It is fast, flexible,
  and a joy to use.
{{< /testimonial >}}

Styling  

The file assets/scss/components/_testimonial.scss defines the Hinode-specific styling of the testimonial shortcode.

.testimonial-img {
    height: 10vw;
    width: 10vw;
    background-color: var(--#{$prefix}body-bg);
}

.testimonial-logo {
    width: 20vw;
}

@include media-breakpoint-up(md) {
    .testimonial-img {
        height: 5vw;
        width: 5vw;
    }

    .testimonial-logo {
        width: 10vw;
    }
}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
align select start v2.0.0      Alignment of the headline, content, or icon. Supported values: [start, center, end].
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
contact string The full name of the contact to retrieve or display.
icon string, uint64 Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
icon-style string fa-5x v2.0.0      Icon style.
image string Image to include in the content block or section heading.
link string, template.URL, url Local page reference or external hyperlink address.
logo string Logo image to include in the content block or section heading.
orientation select stacked Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
padding int 3 Padding of the content.
role string Role of the person.
show-controls bool Trigger to add margins for carousel controls. If set, the card includes a quote icon on the right-hand side too.
url string, template.URL Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
Name Type Required Default
align select start
v2.0.0      Alignment of the headline, content, or icon. Supported values: [start, center, end].
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
contact string
The full name of the contact to retrieve or display.
icon string, uint64
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
icon-style string fa-5x
v2.0.0      Icon style.
image string
Image to include in the content block or section heading.
link string, template.URL, url
Local page reference or external hyperlink address.
logo string
Logo image to include in the content block or section heading.
orientation select stacked
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
padding int 3
Padding of the content.
role string
Role of the person.
show-controls bool
Trigger to add margins for carousel controls. If set, the card includes a quote icon on the right-hand side too.
url string, template.URL
Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
On this page