Product Banner
Figma Component: 23907-226552
Last modified with commit 74094e5 on
by Martin Jagodic.
The Product Banner component (also known as Classificator CHILD) 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 gray background (rgba(202,202,202,0.5)), subtle border radius (16px), and light shadow. Contains title text and optional status area separated by a horizontal line. |
| system | Display title section | The title appears in the upper section using Inter Tight SemiBold font at 9.31px with tight letter spacing (-0.0931px) and 1.2 line height. Text color is black. |
| system | Display divider line | A horizontal gray line (#8d8d8d) with 2.277px height and fully rounded ends (100px radius) separates the title from any status content below. |
| system | Apply container styling | The banner has a light gray translucent background, 16px border radius, subtle shadow (0px 0.414px 0.828px rgba(52,52,52,0.05)), and minimal padding (1.656px) around the content. |
| editor | Set banner title | Editor can configure the title text that appears in the banner (e.g., "Placeholder", 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 |  |