Quote
Description
The Quote component is designed to showcase testimonials or featured quotes in a visually appealing layout. It displays the quote text along with the author's name, title, and avatar. The component features a responsive design, with the avatar and quote text stacked vertically on mobile devices and side-by-side on larger screens.
Installation
bash
sabaccui add quote
Usage
Here's an example of how to use the Quote component in a Storyblok block:
Preview
The Quote component has revolutionized how we display testimonials on our website. It's sleek, responsive, and incredibly easy to use.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
name | text | The name of the person being quoted | - |
title | text | The title or position of the quoted person | - |
quote | markdown | The actual quote text, supports markdown formatting | - |
avatar | asset | The avatar image of the quoted person (only images allowed) | - |
Notes
- The component uses a 12-column grid system for responsive layout.
- The avatar image is displayed in a circular format with a size of 256x256 pixels.
- A decorative quote icon is positioned at the bottom-right of the avatar.
- The quote text is rendered using a Markdown component, allowing for rich text formatting.
- The component is nestable, allowing it to be used within other components.
Best Practices:
- Ensure that the avatar image is of high quality and properly cropped to fit the circular display.
- Keep the quote text concise for better readability and visual appeal.
- Use markdown formatting in the quote field to emphasize key points or add structure to longer quotes.
- Consider the contrast between the text color and background when implementing this component in different design contexts.