Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Icon Tab Bar (SAC)

To be combined with Page Header

Icon Tab Bar (SAC)

Value Description Details
A Icon Font size: 1rem
R padding: 0.5rem

Aside from the icon, spec should be the same as UI5 Icon Tab Bar

Toolbar (SAC)

To be combined with Page Header

Toolbar (SAC Custom)

Value Description Details
A Container Height: 2.75rem
L padding: 1.188rem
R padding: 1rem
Horizontal alignment: Center
B Icon Font size: 1rem
R padding: 0.5rem
Color: --sapContent_IconColor
C Label UI5 Web Components: Label
Type: Bold
Color: --sapTextColor
D Icon Button UI5 Web Components: Button
R padding: 0.5rem
E Icon Button UI5 Web Components: Button

Title Toolbar (SAC)

Title Toolbar (SAC)

Value Description Details
A Title UI5 Web Components: Title
Type: H5 Bold
Color: --sapTextColor

Aside from the title text, spec should be the same as the SAC Toolbar

H2 should be assigned for the DOM (visual remains H5)

Toolbar (DSP)

To be combined with Page Header

Toolbar (DSP)

Value Description Details
A Container Height: 2.75rem
L padding: 1.188rem
R padding: 1rem
Horizontal alignment: Center
B Icon Font size: 1rem
R padding: 0.5rem
Color: --sapContent_NonInteractiveIconColor
C Label UI5 Web Components: Label
Type: Bold
D Icon Button UI5 Web Components: Button
R padding: 0.5rem
E Icon Button UI5 Web Components: Button

Dynamic Page Header

Dynamic Page Header

Value Description Details
A Dynamic Page Header Native UI5: Dynamic Page
Visual Core: Dynamic Page
Title: Special Case - Condensed header (Smaller title)

Dynamic Page Header (SAC)

Dynamic Page Header (SAC)

Value Description Details
A Dynamic Page Header Native UI5: Label

Base Side Panel

Base Side Panel

Data Analyzer (SAC)

Data Analyzer (SAC)

Value Description Details
A Icon Tab Bar / Toolbar Icon Tab Bar / Toolbar Spec
B Dynamic Page Native UI5: Dynamic Page
Visual Core: Dynamic Page
C Side Tab Bar Spec TBC