📒 Developer style guide for Testimonial
Testimonials are Written recommendations from users and are often seen in a separated section of a web page.Generally, a testimonial contains the user’s name, picture, his/her identity(optional) and most importantly his/her quoted text.
General must known design system guideline :
Border-radius :
Border radius of each card is rounded-2xl
Hover Color
For one of different design of this same component the hover color of buttton is:-
hover:bg-blue-700 for Blue theme Button,
hover:bg-slate-800 for Dark theme Button, and
hover:bg-slate-200 for White theme Button
Overlay:
-Image overlay color with opacity in same feature bg-gray-800/50
Paddings :
The padding could be variable depending on the card sizes and UI requirements but normally it is p-6
Font :
| heading | Normal text | sub text | badge type | |
|---|---|---|---|---|
| size | text-2xl | text-lg | text-sm | text-sm / text-md |
| font-weight | semi-bold | semibold / normal | normal | normal |
Color :
| Dark | Blue | White | |
|---|---|---|---|
| Background Color | bg-slate-900 | bg-white | bg-white |
| text color | text-white | text-blue-600/text-slate-900 | text-slate-900 |
Icon guidelines:
Mostly all the icons are taken from → Hero Icons (opens in a new tab)
Icon-text-gap : We follow a convention of equal margin between the text and the icon as padding in y axis py. and always the margin is given from the side of icon.
| Width | Type | |
|---|---|---|
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |
Example of Testimonials component 👇
Want to see this Avatar in action? Try copy pasting this code in Tailwind Playground (opens in a new tab). 💥
<div class="bg-white w-fit rounded-2xl flex gap-6 px-6 py-8">
<img src="https://i.ibb.co/Ykt0SrL/cover2123.png" alt="cover2123" class="h-20"/>
<div class=" flex items-center justify-center">
<div>
<h2 class="text-black text-2xl font-bold">Regina Miss</h1>
<h3 class="text-gray-900 text-base mt-1 font-bold">Designer</h2>
<p class="text-gray-900 text-sm font-normal py-2 w-96">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
<div class="flex gap-x-2 mt-2">
<svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black" />
</svg>
<svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black"/>
</svg>
<svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black"/>
</svg>
<svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" fill="black"/>
</svg>
<svg class="w-4 h-4 stroke-black stroke-2" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</div>
</div>
</div>
</div>
Having some problem ? 😕
If you still have a problem understanding this please join our discord server (opens in a new tab) to get help.