Sketch Note
Hand-drawn sketch testimonial section with rough aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
| backgroundColor | string | #fffdf5 | Background color of the component (hex, rgb, or hsl). |
| gridColor | string | #444444 | Color of the grid pattern (hex, rgb, or hsl). |
| gridOpacity | number | 0.1 | Opacity of the grid pattern (0-1). |
| title | string | The Verdict | Main title text. |
| titleColor | string | #1f2937 | Color of the title text (hex, rgb, or hsl). |
| titleUnderlineColor | string | #facc15 | Color of the title underline (hex, rgb, or hsl). |
| titleUnderlineWavy | boolean | true | Whether to use wavy underline style. |
| cardBgColor | string | #ffffff | Background color of the testimonial cards (hex, rgb, or hsl). |
| cardBorderColor | string | #1f2937 | Border color of the testimonial cards (hex, rgb, or hsl). |
| cardShadowColor | string | rgba(0,0,0,0.1) | Shadow color of the cards (hex, rgb, or hsl). |
| tapeBgColor | string | rgba(254, 240, 138, 0.8) | Background color of tape decorations (hex, rgb, or hsl). |
| tapeRotate | number | -2 | Rotation angle of tape decorations in degrees. |
| starColor | string | #eab308 | Color of star icons (hex, rgb, or hsl). |
| quoteColor | string | #1f2937 | Color of the quote text (hex, rgb, or hsl). |
| authorNameColor | string | #1f2937 | Color of the author name text (hex, rgb, or hsl). |
| authorCompanyColor | string | #6b7280 | Color of the author company text (hex, rgb, or hsl). |
| authorCompanyUppercase | boolean | true | Whether to display company names in uppercase. |
| avatarBorderColor | string | #1f2937 | Border color of the avatar images (hex, rgb, or hsl). |
| decorativeLineColor | string | #000000 | Color of decorative lines (hex, rgb, or hsl). |
| decorativeLineOpacity | number | 0.1 | Opacity of decorative lines (0-1). |
When to Use
Ideal for creative labs, educational platforms, and Next.js portfolios that want a playful, hand-crafted aesthetic. Use this React component for a 'sketchbook' testimonial section with rough borders, wavy underlines, and tape decorations.
Best Practices
Follow React best practices by pairing this with playful, informal typography. Maintain scalable component architecture by using it for narrative sections. Optimize for performance by using efficient SVG filters for the 'hand-drawn' lines.
Why This Component Matters
Sketch aesthetics break the digital barrier by adding a human, tactile touch to social proof. This production-ready UI component helpsคุณ build an interface that feels approachable and experimental, improving user engagement through visual novelty.
FAQ
QHow is the tape effect created?
It uses semi-transparent `rgba` backgrounds and slight rotations to simulate physical pieces of masking tape holding the cards.
QCan I change the underline style?
Yes, the `titleUnderlineWavy` prop allows you to switch between a standard straight underline and a playful wavy one.
QIs the grid real paper?
The background uses a lightweight CSS grid pattern on top of a soft cream color (`#fffdf5`) to mimic the look of an artist's sketchbook.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.