Intro

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

Creation Item

Single Switch

Value Description Details
A Avatar Native UI5: Avatar
Content: Object
Type: Icon
Display Size: XS

Background Color (Refer to Avatar Color Hierarchy under Guidelines):
Basic Features: Accent7
Intermediate Features: Accent4
Complex Features: Accent5
B Label Native UI5: Label
Font Size: --sapFontSize 14
Font Weight: Normal
Color: --sapContent_LabelColor
C Grid List Item Native UI5 Grid List Item
Width: 13rem
Height: 3rem
Padding: 0.5rem
Background Color: --sapList_Background
Border Radius: --sapTile_BorderCornerRadius
Box Shadow: --sapContent_Shadow0

Creation Item Template

Switch Group with Label (Vertical)

Value Description Details
A Image Native UI5: Image
Height: 6rem
B Label Native UI5: Label
Font Size: --sapFontSize 14
Font Weight: Normal
Color: --sapContent_LabelColor
C Grid List Item Native UI5: Grid List Item
Width: 13rem
Height: 9rem
Padding: 0.5rem
Background Color: --sapList_Background
Border Radius: --sapTile_BorderCornerRadius
Box Shadow: --sapContent_Shadow0

Base Creation Item Set

Switch Group with Label (Horizontal)

Value Description Details
A Grid List Native UI5: Grid List

Title:
Font Size: --sapFontHeader5Size
Font Weight: Bold
Color: --sapGroup_TitleTextColor
Gap: 0.5rem
B Grid List Item Native UI5: Grid List Item
Refer to Creation Item specs

Creation Item: SAC Templates Set

Switch Group with Label (Title)

Value Description Details
A Grid List Native UI5: Grid List

Title:
Font Size: --sapFontHeader5Size
Font Weight: Bold
Color: --sapGroup_TitleTextColor
Gap: 0.5rem
B Grid List Item Native UI5: Grid List Item
Refer to Creation Item Template specs