diff --git a/content/components/card.md b/content/components/card.md index 221f4e9..6e93cca 100644 --- a/content/components/card.md +++ b/content/components/card.md @@ -36,11 +36,28 @@ Use `title`, `thumbnail`, `icon`, and inner content to define the card's content ### Referenced content -Set `path` to reference a content page within your site. +Set `path` to reference a content page within your site. The card uses the title and description of the referenced page, unless overruled. {{< example lang="hugo" >}} -{{}} +{{}} +{{}} + Custom button body. +{{}} +{{< /example >}} + + +### Inline content with a static reference + +Set `href` and `button-label` to reference a static url with a button. + + +{{< example lang="hugo" >}} +{{}} + Hinode is a production-ready Hugo theme built on Bootstrap 5. + Open source, actively maintained, and built for developers. +{{}} {{< /example >}} diff --git a/content/components/testimonial.md b/content/components/testimonial.md new file mode 100644 index 0000000..8bcc3b3 --- /dev/null +++ b/content/components/testimonial.md @@ -0,0 +1,123 @@ +--- +author: Mark Dumay +title: Testimonial +date: 2026-03-30 +description: Use the testimonial shortcode to display a quote with attribution. +type: docs +tags: component +weight: 335 +--- + +## 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. + + +{{< example lang="hugo" >}} +{{}} + Hinode has transformed the way we publish documentation. It is fast, flexible, + and a joy to use. +{{}} +{{< /example >}} + + +### Testimonial with avatar + +Add `image` to display a circular avatar next to the contact name. + + +{{< example lang="hugo" >}} +{{}} + Hinode has transformed the way we publish documentation. It is fast, flexible, + and a joy to use. +{{}} +{{< /example >}} + + +### Testimonial with logo + +Use `logo` to display a company or brand logo above the quote. + + +{{< example lang="hugo" >}} +{{}} + Hinode has transformed the way we publish documentation. It is fast, flexible, + and a joy to use. +{{}} +{{< /example >}} + + +### 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. + + +{{< example lang="hugo" >}} +{{}} + Hinode has transformed the way we publish documentation. It is fast, flexible, + and a joy to use. +{{}} +{{< /example >}} + + +### Horizontal orientation + +Set `orientation` to `horizontal` to display the avatar in a column to the left of the quote instead of inline below it. + + +{{< example lang="hugo" >}} +{{}} + Hinode has transformed the way we publish documentation. It is fast, flexible, + and a joy to use. +{{}} +{{< /example >}} + + +### Colored testimonial + +Use `color` to apply a Bootstrap theme color as the background. + + +{{< example lang="hugo" >}} +{{}} + Hinode has transformed the way we publish documentation. It is fast, flexible, + and a joy to use. +{{}} +{{< /example >}} + + +### Testimonial with case study + +Use `link` to add a call-to-action button pointing to a case study. + + +{{< example lang="hugo" >}} +{{}} + Hinode has transformed the way we publish documentation. It is fast, flexible, + and a joy to use. +{{}} +{{< /example >}} + + +## Styling + +The file `assets/scss/components/_testimonial.scss` defines the Hinode-specific styling of the `testimonial` shortcode. + +{{< file file="assets/scss/components/_testimonial.scss" show="false" >}} + +## Arguments + +The shortcode supports the following arguments: + +{{< args structure="testimonial" group="shortcode" >}}