Top3
Showcase top three items in a three-column layout
npm run add Top3Use the Top3 component to showcase top three items in a visually appealing three-column layout. Each item can include an image, title, rating, description, and a call-to-action (CTA) button. They:
- Highlights key offerings: Perfect for showcasing top products, services, or features.
- Engages users: Visually appealing layout draws attention to important items.
- Easy customization: Flexible props allow for tailored content and styling.
---const items = [ { ribbon: { label: 'Best Value' }, img: { src: '/img/properties/property1.png', alt: 'Modern apartment in downtown area', width: 600, height: 250 }, title: 'Modern Downtown Apartment', rating: { score: 4.8, color: 'var(--w-color-warning)', showText: true, text: '{0}/{1}' }, description: 'A stylish 2-bedroom apartment...', cta: { text: 'View Details ->' } }, { ... }, { ... }]---
<Top3 items={items} />The Top3 component expects an array of items via the items prop. Each item can include various optional properties to customize its appearance and functionality. Only the img and title props are required, all other props are optional.
---const items = [ { img: { src: '/img/properties/property1.png', alt: 'Modern apartment in downtown area', width: 600, height: 250 }, title: 'Modern Downtown Apartment' }, { ... }, { ... }]---
<Top3 items={items} />Ratings
The ratings on each item can be configured using the rating prop, which accepts an object in the form of RatingProps. This allows you to display star ratings along with optional text, such as number of ratings:
---const items = [ { ..., rating: { score: 4.8, color: 'var(--w-color-info)', showText: true, size: 16, reviewCount: 10, text: '{0}/{1}' } }, { ... }, { ... }]---
<Top3 items={items} />Ribbons
Optionally, you can add a ribbon to each item using the ribbon prop. This prop accepts an object with properties to customize the ribbon’s appearance and text:
colorText: Sets the text color of the ribbon.colorStart: Sets the starting color of the ribbon gradient.colorEnd: Sets the ending color of the ribbon gradient.label: Sets the text label on the ribbon.
---const items = [ { ..., ribbon: { label: 'Featured' } }, { ... }, { ... }]---
<Top3 items={items} />Ribbons have a default color scheme, which you can either override on a per-ribbon basis using the colorText, colorStart, and colorEnd properties or globally using the following CSS variables:
html body { --w-top3-ribbon-color: #FFF; --w-top3-ribbon-bg-start: #1CAED7; --w-top3-ribbon-bg-end: #4E00C2;}Secondary Cards
Items are displayed using Card components. You can switch to the secondary style by setting the secondary prop to true for one, or all items:
---const items = [ { ..., secondary: true }, { ... }, { ... }]---
<Top3 items={items} />CTA Buttons
Each item can include a call-to-action (CTA) button configured via the cta prop. This prop accepts an object in the form of ButtonProps, allowing you to customize the button’s text, icon, and other properties:
---const items = [ { ..., cta: { text: 'Learn More', theme: 'secondary', icon: 'info' } }, { ... }, { ... }]---
<Top3 items={items} />API
type Top3Props = { items: { ribbon?: { colorText?: string colorStart?: string colorEnd?: string label: string }, img: { src: string alt: string width: number height: number lazy?: boolean } title: string rating?: RatingProps description?: string secondary?: boolean cta?: ({ text: string icon?: string } & ButtonProps) }[] className?: string}| Prop | Purpose |
|---|---|
items | Sets an array of items to display. |
items.ribbon | Optional ribbon configuration for each item, including text and colors. |
items.ribbon.colorText | Sets the text color of the ribbon. |
items.ribbon.colorStart | Sets the starting background color of the ribbon gradient. |
items.ribbon.colorEnd | Sets the ending background color of the ribbon gradient. |
items.ribbon.label | Sets the text label on the ribbon. |
items.img.src | Sets the source URL of the image. |
items.img.alt | Sets the alt text for the image. |
items.img.width | Sets the width of the image. |
items.img.height | Sets the height of the image. |
items.img.lazy | Set to true to enable image lazy loading. |
items.title | Sets the title of the item. |
items.rating | Optional rating configuration for the item using RatingProps. |
items.description | Sets an optional description for the item. |
items.secondary | Set to true to apply secondary styling to the item's card. |
items.cta | Optional CTA button configuration using ButtonProps. |
items.cta.text | Sets the text displayed on the CTA. |
items.cta.icon | Sets an optional icon to display on the CTA. |
className | Pass additional CSS classes for the component. |