Product Banner
Figma Component: 23907-226552
Last modified with commit a4d1bec on
by Sara Deric.
The Product Banner component displays a compact label showing product classification or category information. Features a rounded container with title text and optional status indicators, separated by a horizontal divider line.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display product banner | The component renders as a compact rounded container with light background and subtle border styling. Contains title text and optional status area separated by a horizontal line. |
| system | Display title section | The title appears in the upper section using semibold font with tight letter spacing. |
| system | Display divider line | A horizontal line with rounded ends separates the title from any status content below. |
| system | Apply container styling | The banner has a light translucent background, rounded corners, subtle shadow, and minimal padding around the content. |
| editor | Set banner title | Editor can configure the title text that appears in the banner (e.g., category name, product type). |
| editor | Add status indicators | Editor can optionally add status badges or indicators in the status area below the title and divider line. |
| user | View product classification | User sees the product category or classification information displayed in a compact, visually distinct banner format. |
| user | Identify product type | User can quickly identify the product type or category by reading the title text in the banner. |
Properties
Responsive
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |