@fundamental-styles/mcp 0.41.8-rc.8 → 0.41.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/CHANGELOG.md +32 -0
- package/data/accessibility.json +34 -6
- package/data/component-graph.md +7128 -465
- package/data/component-relationships.json +42632 -2263
- package/data/components/avatar-product-switch.md +391 -271
- package/data/components/dynamic-page-dynamic-page.md +287 -3
- package/data/components/dynamic-page.md +1 -1
- package/data/components/panel.md +15 -11
- package/data/design-tokens.json +2 -2
- package/data/examples/Components/panel/borderless.example.html +3 -3
- package/data/examples/Components/panel/expandable.example.html +2 -2
- package/data/examples/Components/panel/fixed-height-content.example.html +1 -1
- package/data/examples/Components/panel/fixed.example.html +1 -1
- package/data/examples/Components/panel/sticky-header.example.html +1 -1
- package/data/examples/Components/panel/transparent.example.html +2 -2
- package/data/examples/Components/product-switch/large.example.html +125 -94
- package/data/examples/Components/product-switch/medium.example.html +26 -13
- package/data/examples/Components/product-switch/small.example.html +71 -33
- package/data/examples/Layouts/dynamic-page/large.example.html +156 -0
- package/data/examples/Layouts/dynamic-page/mobile-collapsed.example.html +1 -1
- package/data/examples/Layouts/dynamic-page/responsive-paddings.example.html +121 -0
- package/data/examples/Layouts/dynamic-page/summary-line.example.html +1 -1
- package/package.json +2 -1
|
@@ -72,101 +72,132 @@ npm install fundamental-styles
|
|
|
72
72
|
|
|
73
73
|
```html
|
|
74
74
|
<div class="fd-product-switch__body">
|
|
75
|
-
<ul class="fd-product-switch__list">
|
|
76
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
77
|
-
<
|
|
75
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
76
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Home Home Home Home Home Home Home Home Central Home Central Home Central Home Central Home" aria-posinset="1" aria-setsize="14">
|
|
77
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Home">
|
|
78
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
79
|
+
</span>
|
|
78
80
|
<div class="fd-product-switch__text">
|
|
79
|
-
<div class="fd-product-switch__title">Home</div>
|
|
80
|
-
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
81
|
-
</div>
|
|
82
|
-
</li>
|
|
83
|
-
<li class="fd-product-switch__item selected" tabindex="0">
|
|
84
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Avatar landscape"></span>
|
|
85
|
-
<div class="fd-product-switch__text">
|
|
86
|
-
<div class="fd-product-switch__title">Analytics Cloud Analytics CloudAnalytics CloudAnalytics Cloud</div>
|
|
87
|
-
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
88
|
-
</div>
|
|
89
|
-
</li>
|
|
90
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
91
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
92
|
-
<div class="fd-product-switch__text">
|
|
93
|
-
<div class="fd-product-switch__title">Catalog</div>
|
|
94
|
-
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
95
|
-
</div>
|
|
96
|
-
</li>
|
|
97
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
98
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
99
|
-
<div class="fd-product-switch__text">
|
|
100
|
-
<div class="fd-product-switch__title">Guided Buying</div>
|
|
101
|
-
</div>
|
|
102
|
-
</li>
|
|
103
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
104
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
105
|
-
<div class="fd-product-switch__text">
|
|
106
|
-
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
107
|
-
</div>
|
|
108
|
-
</li>
|
|
109
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
110
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
111
|
-
<div class="fd-product-switch__text">
|
|
112
|
-
<div class="fd-product-switch__title">Travel & Expense</div>
|
|
113
|
-
<div class="fd-product-switch__subtitle">Concur</div>
|
|
114
|
-
</div>
|
|
115
|
-
</li>
|
|
116
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
117
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
118
|
-
<div class="fd-product-switch__text">
|
|
119
|
-
<div class="fd-product-switch__title">Vendor Management</div>
|
|
120
|
-
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
121
|
-
</div>
|
|
122
|
-
</li>
|
|
123
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
124
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
125
|
-
<div class="fd-product-switch__text">
|
|
126
|
-
<div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
|
|
127
|
-
</div>
|
|
128
|
-
</li>
|
|
129
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
130
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
131
|
-
<div class="fd-product-switch__text">
|
|
132
|
-
<div class="fd-product-switch__title">Sales Cloud</div>
|
|
133
|
-
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
134
|
-
</div>
|
|
135
|
-
</li>
|
|
136
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
137
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
138
|
-
<div class="fd-product-switch__text">
|
|
139
|
-
<div class="fd-product-switch__title">Commerce Cloud</div>
|
|
140
|
-
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
81
|
+
<div class="fd-product-switch__title">Home Home Home Home Home Home Home Home</div>
|
|
82
|
+
<div class="fd-product-switch__subtitle">Central Home Central Home Central Home Central Home</div>
|
|
141
83
|
</div>
|
|
142
84
|
</li>
|
|
143
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
</
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
<div class="fd-product-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
</div>
|
|
85
|
+
<li class="fd-product-switch__item selected" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="14">
|
|
86
|
+
<span
|
|
87
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
88
|
+
|
|
89
|
+
role="img"
|
|
90
|
+
aria-label="Avatar landscape"
|
|
91
|
+
></span>
|
|
92
|
+
<div class="fd-product-switch__text">
|
|
93
|
+
<div class="fd-product-switch__title">Analytics Cloud Analytics Cloud</div>
|
|
94
|
+
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
95
|
+
</div>
|
|
96
|
+
</li>
|
|
97
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="14">
|
|
98
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Catalog">
|
|
99
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
100
|
+
</span>
|
|
101
|
+
<div class="fd-product-switch__text">
|
|
102
|
+
<div class="fd-product-switch__title">Catalog</div>
|
|
103
|
+
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
104
|
+
</div>
|
|
105
|
+
</li>
|
|
106
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="14">
|
|
107
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Guided Buying">
|
|
108
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
109
|
+
</span>
|
|
110
|
+
<div class="fd-product-switch__text">
|
|
111
|
+
<div class="fd-product-switch__title">Guided Buying</div>
|
|
112
|
+
</div>
|
|
113
|
+
</li>
|
|
114
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="14">
|
|
115
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Strategic Procurement">
|
|
116
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
117
|
+
</span>
|
|
118
|
+
<div class="fd-product-switch__text">
|
|
119
|
+
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
120
|
+
</div>
|
|
121
|
+
</li>
|
|
122
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="14">
|
|
123
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Travel & Expense">
|
|
124
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
125
|
+
</span>
|
|
126
|
+
<div class="fd-product-switch__text">
|
|
127
|
+
<div class="fd-product-switch__title">Travel & Expense</div>
|
|
128
|
+
<div class="fd-product-switch__subtitle">Concur</div>
|
|
129
|
+
</div>
|
|
130
|
+
</li>
|
|
131
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="14">
|
|
132
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Vendor Management">
|
|
133
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
134
|
+
</span>
|
|
135
|
+
<div class="fd-product-switch__text">
|
|
136
|
+
<div class="fd-product-switch__title">Vendor Management</div>
|
|
137
|
+
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
138
|
+
</div>
|
|
139
|
+
</li>
|
|
140
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Human Capital Management Human Capital Management" aria-posinset="8" aria-setsize="14">
|
|
141
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Human Capital Management">
|
|
142
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
143
|
+
</span>
|
|
144
|
+
<div class="fd-product-switch__text">
|
|
145
|
+
<div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
|
|
146
|
+
</div>
|
|
147
|
+
</li>
|
|
148
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="14">
|
|
149
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Sales Cloud">
|
|
150
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
151
|
+
</span>
|
|
152
|
+
<div class="fd-product-switch__text">
|
|
153
|
+
<div class="fd-product-switch__title">Sales Cloud</div>
|
|
154
|
+
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
155
|
+
</div>
|
|
156
|
+
</li>
|
|
157
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="14">
|
|
158
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Commerce Cloud">
|
|
159
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
160
|
+
</span>
|
|
161
|
+
<div class="fd-product-switch__text">
|
|
162
|
+
<div class="fd-product-switch__title">Commerce Cloud</div>
|
|
163
|
+
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
164
|
+
</div>
|
|
165
|
+
</li>
|
|
166
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="14">
|
|
167
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Marketing Cloud">
|
|
168
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
169
|
+
</span>
|
|
170
|
+
<div class="fd-product-switch__text">
|
|
171
|
+
<div class="fd-product-switch__title">Marketing Cloud</div>
|
|
172
|
+
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
173
|
+
</div>
|
|
174
|
+
</li>
|
|
175
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="14">
|
|
176
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Service Cloud">
|
|
177
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
178
|
+
</span>
|
|
179
|
+
<div class="fd-product-switch__text">
|
|
180
|
+
<div class="fd-product-switch__title">Service Cloud</div>
|
|
181
|
+
</div>
|
|
182
|
+
</li>
|
|
183
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="14">
|
|
184
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Customer Data Cloud">
|
|
185
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
186
|
+
</span>
|
|
187
|
+
<div class="fd-product-switch__text">
|
|
188
|
+
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
189
|
+
</div>
|
|
190
|
+
</li>
|
|
191
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="14">
|
|
192
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA">
|
|
193
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
194
|
+
</span>
|
|
195
|
+
<div class="fd-product-switch__text">
|
|
196
|
+
<div class="fd-product-switch__title">S/4HANA</div>
|
|
197
|
+
</div>
|
|
198
|
+
</li>
|
|
199
|
+
</ul>
|
|
200
|
+
</div>
|
|
170
201
|
```
|
|
171
202
|
|
|
172
203
|
## Modifiers
|
|
@@ -175,6 +206,13 @@ npm install fundamental-styles
|
|
|
175
206
|
|-------|-------------|
|
|
176
207
|
| `fd-avatar--sm` | For smaller screens (mobile), the product switch is displayed in list format |
|
|
177
208
|
| `fd-avatar--thumbnail` | Style variant |
|
|
209
|
+
| `fd-avatar--transparent` | Style variant |
|
|
210
|
+
|
|
211
|
+
## BEM Elements
|
|
212
|
+
|
|
213
|
+
This component uses the following BEM elements:
|
|
214
|
+
|
|
215
|
+
- `fd-avatar__icon`
|
|
178
216
|
|
|
179
217
|
## Related Components
|
|
180
218
|
|
|
@@ -217,248 +255,330 @@ Product switch is displayed with a maximum of 4 columns on large desktop screens
|
|
|
217
255
|
|
|
218
256
|
```html
|
|
219
257
|
<div class="fd-product-switch__body">
|
|
220
|
-
<ul class="fd-product-switch__list">
|
|
221
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
222
|
-
<
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
226
|
-
</div>
|
|
227
|
-
</li>
|
|
228
|
-
<li class="fd-product-switch__item selected" tabindex="0">
|
|
229
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Avatar landscape"></span>
|
|
258
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
259
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Home Home Home Home Home Home Home Home Central Home Central Home Central Home Central Home" aria-posinset="1" aria-setsize="14">
|
|
260
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Home">
|
|
261
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
262
|
+
</span>
|
|
230
263
|
<div class="fd-product-switch__text">
|
|
231
|
-
<div class="fd-product-switch__title">
|
|
232
|
-
<div class="fd-product-switch__subtitle">
|
|
264
|
+
<div class="fd-product-switch__title">Home Home Home Home Home Home Home Home</div>
|
|
265
|
+
<div class="fd-product-switch__subtitle">Central Home Central Home Central Home Central Home</div>
|
|
233
266
|
</div>
|
|
234
267
|
</li>
|
|
235
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
236
|
-
<
|
|
237
|
-
|
|
238
|
-
<div class="fd-product-switch__title">Catalog</div>
|
|
239
|
-
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
240
|
-
</div>
|
|
241
|
-
</li>
|
|
242
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
243
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
244
|
-
<div class="fd-product-switch__text">
|
|
245
|
-
<div class="fd-product-switch__title">Guided Buying</div>
|
|
246
|
-
</div>
|
|
247
|
-
</li>
|
|
248
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
249
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
250
|
-
<div class="fd-product-switch__text">
|
|
251
|
-
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
252
|
-
</div>
|
|
253
|
-
</li>
|
|
254
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
255
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
256
|
-
<div class="fd-product-switch__text">
|
|
257
|
-
<div class="fd-product-switch__title">Travel & Expense</div>
|
|
258
|
-
<div class="fd-product-switch__subtitle">Concur</div>
|
|
259
|
-
</div>
|
|
260
|
-
</li>
|
|
261
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
262
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
263
|
-
<div class="fd-product-switch__text">
|
|
264
|
-
<div class="fd-product-switch__title">Vendor Management</div>
|
|
265
|
-
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
266
|
-
</div>
|
|
267
|
-
</li>
|
|
268
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
269
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
270
|
-
<div class="fd-product-switch__text">
|
|
271
|
-
<div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
|
|
272
|
-
</div>
|
|
273
|
-
</li>
|
|
274
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
275
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
276
|
-
<div class="fd-product-switch__text">
|
|
277
|
-
<div class="fd-product-switch__title">Sales Cloud</div>
|
|
278
|
-
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
279
|
-
</div>
|
|
280
|
-
</li>
|
|
281
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
282
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
283
|
-
<div class="fd-product-switch__text">
|
|
284
|
-
<div class="fd-product-switch__title">Commerce Cloud</div>
|
|
285
|
-
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
286
|
-
</div>
|
|
287
|
-
</li>
|
|
288
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
289
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
290
|
-
<div class="fd-product-switch__text">
|
|
291
|
-
<div class="fd-product-switch__title">Marketing Cloud</div>
|
|
292
|
-
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
293
|
-
</div>
|
|
294
|
-
</li>
|
|
295
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
296
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
297
|
-
<div class="fd-product-switch__text">
|
|
298
|
-
<div class="fd-product-switch__title">Service Cloud</div>
|
|
299
|
-
</div>
|
|
300
|
-
</li>
|
|
301
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
302
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
303
|
-
<div class="fd-product-switch__text">
|
|
304
|
-
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
305
|
-
</div>
|
|
306
|
-
</li>
|
|
307
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
308
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
309
|
-
<div class="fd-product-switch__text">
|
|
310
|
-
<div class="fd-product-switch__title">S/4HANA</div>
|
|
311
|
-
</div>
|
|
312
|
-
</li>
|
|
313
|
-
</ul>
|
|
314
|
-
</div>
|
|
315
|
-
```
|
|
316
|
-
|
|
317
|
-
### Medium
|
|
318
|
-
|
|
319
|
-
If there are 6 (or less) items to display, it is recommended to use the 3-column layout (medium). To display a medium-sized product switch, add the \
|
|
320
|
-
|
|
321
|
-
```html
|
|
322
|
-
<div class="fd-product-switch__body fd-product-switch__body--col-3">
|
|
323
|
-
<ul class="fd-product-switch__list">
|
|
324
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
325
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>
|
|
326
|
-
<div class="fd-product-switch__text">
|
|
327
|
-
<div class="fd-product-switch__title">Home</div>
|
|
328
|
-
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
329
|
-
</div>
|
|
330
|
-
</li>
|
|
331
|
-
<li class="fd-product-switch__item selected" tabindex="0">
|
|
332
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Avatar landscape"></span>
|
|
333
|
-
<div class="fd-product-switch__text">
|
|
334
|
-
<div class="fd-product-switch__title">Analytics Cloud</div>
|
|
335
|
-
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
336
|
-
</div>
|
|
337
|
-
</li>
|
|
338
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
339
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
340
|
-
<div class="fd-product-switch__text">
|
|
341
|
-
<div class="fd-product-switch__title">Catalog</div>
|
|
342
|
-
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
343
|
-
</div>
|
|
344
|
-
</li>
|
|
345
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
346
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
347
|
-
<div class="fd-product-switch__text">
|
|
348
|
-
<div class="fd-product-switch__title">Guided Buying</div>
|
|
349
|
-
</div>
|
|
350
|
-
</li>
|
|
351
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
352
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
353
|
-
<div class="fd-product-switch__text">
|
|
354
|
-
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
355
|
-
</div>
|
|
356
|
-
</li>
|
|
357
|
-
</ul>
|
|
358
|
-
</div>
|
|
359
|
-
```
|
|
268
|
+
<li class="fd-product-switch__item selected" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="14">
|
|
269
|
+
<span
|
|
270
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
360
271
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
```html
|
|
366
|
-
<div class="fd-product-switch__body fd-product-switch__body--mobile">
|
|
367
|
-
<ul class="fd-product-switch__list">
|
|
368
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
369
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>
|
|
370
|
-
<div class="fd-product-switch__text">
|
|
371
|
-
<div class="fd-product-switch__title">Home</div>
|
|
372
|
-
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
373
|
-
</li>
|
|
374
|
-
<li class="fd-product-switch__item selected" tabindex="0">
|
|
375
|
-
<i role="presentation" class="fd-product-switch__icon sap-icon--business-objects-experience"></i>
|
|
272
|
+
role="img"
|
|
273
|
+
aria-label="Avatar landscape"
|
|
274
|
+
></span>
|
|
376
275
|
<div class="fd-product-switch__text">
|
|
377
|
-
<div class="fd-product-switch__title">Analytics Cloud Analytics Cloud
|
|
276
|
+
<div class="fd-product-switch__title">Analytics Cloud Analytics Cloud</div>
|
|
378
277
|
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
379
278
|
</div>
|
|
380
279
|
</li>
|
|
381
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
382
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="
|
|
280
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="14">
|
|
281
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Catalog">
|
|
282
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
283
|
+
</span>
|
|
383
284
|
<div class="fd-product-switch__text">
|
|
384
285
|
<div class="fd-product-switch__title">Catalog</div>
|
|
385
286
|
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
386
287
|
</div>
|
|
387
288
|
</li>
|
|
388
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
389
|
-
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="
|
|
289
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="14">
|
|
290
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Guided Buying">
|
|
291
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
292
|
+
</span>
|
|
390
293
|
<div class="fd-product-switch__text">
|
|
391
294
|
<div class="fd-product-switch__title">Guided Buying</div>
|
|
392
295
|
</div>
|
|
393
296
|
</li>
|
|
394
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
395
|
-
<
|
|
297
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="14">
|
|
298
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Strategic Procurement">
|
|
299
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
300
|
+
</span>
|
|
396
301
|
<div class="fd-product-switch__text">
|
|
397
302
|
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
398
303
|
</div>
|
|
399
304
|
</li>
|
|
400
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
401
|
-
<
|
|
305
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="14">
|
|
306
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Travel & Expense">
|
|
307
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
308
|
+
</span>
|
|
402
309
|
<div class="fd-product-switch__text">
|
|
403
310
|
<div class="fd-product-switch__title">Travel & Expense</div>
|
|
404
311
|
<div class="fd-product-switch__subtitle">Concur</div>
|
|
405
312
|
</div>
|
|
406
313
|
</li>
|
|
407
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
408
|
-
<
|
|
314
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="14">
|
|
315
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Vendor Management">
|
|
316
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
317
|
+
</span>
|
|
409
318
|
<div class="fd-product-switch__text">
|
|
410
319
|
<div class="fd-product-switch__title">Vendor Management</div>
|
|
411
320
|
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
412
321
|
</div>
|
|
413
322
|
</li>
|
|
414
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
415
|
-
<
|
|
323
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Human Capital Management Human Capital Management" aria-posinset="8" aria-setsize="14">
|
|
324
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Human Capital Management">
|
|
325
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
326
|
+
</span>
|
|
416
327
|
<div class="fd-product-switch__text">
|
|
417
|
-
<div class="fd-product-switch__title">
|
|
328
|
+
<div class="fd-product-switch__title">Human Capital Management Human Capital Management</div>
|
|
418
329
|
</div>
|
|
419
330
|
</li>
|
|
420
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
421
|
-
<
|
|
331
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="14">
|
|
332
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Sales Cloud">
|
|
333
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
334
|
+
</span>
|
|
422
335
|
<div class="fd-product-switch__text">
|
|
423
336
|
<div class="fd-product-switch__title">Sales Cloud</div>
|
|
424
337
|
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
425
338
|
</div>
|
|
426
339
|
</li>
|
|
427
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
428
|
-
<
|
|
340
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="14">
|
|
341
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Commerce Cloud">
|
|
342
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
343
|
+
</span>
|
|
429
344
|
<div class="fd-product-switch__text">
|
|
430
345
|
<div class="fd-product-switch__title">Commerce Cloud</div>
|
|
431
346
|
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
432
347
|
</div>
|
|
433
348
|
</li>
|
|
434
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
435
|
-
<
|
|
349
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="14">
|
|
350
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Marketing Cloud">
|
|
351
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
352
|
+
</span>
|
|
436
353
|
<div class="fd-product-switch__text">
|
|
437
354
|
<div class="fd-product-switch__title">Marketing Cloud</div>
|
|
438
355
|
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
439
356
|
</div>
|
|
440
357
|
</li>
|
|
441
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
442
|
-
<
|
|
358
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="14">
|
|
359
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Service Cloud">
|
|
360
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
361
|
+
</span>
|
|
443
362
|
<div class="fd-product-switch__text">
|
|
444
363
|
<div class="fd-product-switch__title">Service Cloud</div>
|
|
445
364
|
</div>
|
|
446
365
|
</li>
|
|
447
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
448
|
-
<
|
|
366
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="14">
|
|
367
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Customer Data Cloud">
|
|
368
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
369
|
+
</span>
|
|
449
370
|
<div class="fd-product-switch__text">
|
|
450
371
|
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
451
372
|
</div>
|
|
452
373
|
</li>
|
|
453
|
-
<li class="fd-product-switch__item" tabindex="0">
|
|
454
|
-
<
|
|
374
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="14">
|
|
375
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA">
|
|
376
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
377
|
+
</span>
|
|
455
378
|
<div class="fd-product-switch__text">
|
|
456
379
|
<div class="fd-product-switch__title">S/4HANA</div>
|
|
457
380
|
</div>
|
|
458
381
|
</li>
|
|
459
382
|
</ul>
|
|
460
383
|
</div>
|
|
461
|
-
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
### Medium
|
|
387
|
+
|
|
388
|
+
If there are 6 (or less) items to display, it is recommended to use the 3-column layout (medium). To display a medium-sized product switch, add the \
|
|
389
|
+
|
|
390
|
+
```html
|
|
391
|
+
<div class="fd-product-switch__body fd-product-switch__body--col-3">
|
|
392
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
393
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Home Home Home Home Home Home Home Central Home Central Home Central Home Central Home" aria-posinset="1" aria-setsize="5">
|
|
394
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--transparent" role="img" aria-label="Home">
|
|
395
|
+
<i role="presentation" aria-hidden="true" class="fd-avatar__icon sap-icon--home"></i>
|
|
396
|
+
</span>
|
|
397
|
+
<div class="fd-product-switch__text">
|
|
398
|
+
<div class="fd-product-switch__title">Home Home Home Home Home Home Home</div>
|
|
399
|
+
<div class="fd-product-switch__subtitle">Central Home Central Home Central Home Central Home</div>
|
|
400
|
+
</div>
|
|
401
|
+
</li>
|
|
402
|
+
<li class="fd-product-switch__item selected" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="5">
|
|
403
|
+
<span
|
|
404
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
405
|
+
|
|
406
|
+
role="img"
|
|
407
|
+
aria-label="Analytics Cloud"
|
|
408
|
+
></span>
|
|
409
|
+
<div class="fd-product-switch__text">
|
|
410
|
+
<div class="fd-product-switch__title">Analytics Cloud</div>
|
|
411
|
+
<div class="fd-product-switch__subtitle">Analytics Cloud</div>
|
|
412
|
+
</div>
|
|
413
|
+
</li>
|
|
414
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="5">
|
|
415
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Catalog">
|
|
416
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--contacts"></i>
|
|
417
|
+
</span>
|
|
418
|
+
<div class="fd-product-switch__text">
|
|
419
|
+
<div class="fd-product-switch__title">Catalog</div>
|
|
420
|
+
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
421
|
+
</div>
|
|
422
|
+
</li>
|
|
423
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="5">
|
|
424
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Guided Buying">
|
|
425
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--credit-card"></i>
|
|
426
|
+
</span>
|
|
427
|
+
<div class="fd-product-switch__text">
|
|
428
|
+
<div class="fd-product-switch__title">Guided Buying</div>
|
|
429
|
+
</div>
|
|
430
|
+
</li>
|
|
431
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="5">
|
|
432
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Strategic Procurement">
|
|
433
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
434
|
+
</span>
|
|
435
|
+
<div class="fd-product-switch__text">
|
|
436
|
+
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
437
|
+
</div>
|
|
438
|
+
</li>
|
|
439
|
+
</ul>
|
|
440
|
+
</div>
|
|
441
|
+
```
|
|
442
|
+
|
|
443
|
+
### Small
|
|
444
|
+
|
|
445
|
+
For smaller screens (mobile), the product switch is displayed in list format. To achieve this style, add the \
|
|
446
|
+
|
|
447
|
+
```html
|
|
448
|
+
<div class="fd-product-switch__body fd-product-switch__body--mobile">
|
|
449
|
+
<ul class="fd-product-switch__list" role="menu">
|
|
450
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Home Central Home" aria-posinset="1" aria-setsize="14">
|
|
451
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Home">
|
|
452
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--home"></i>
|
|
453
|
+
</span>
|
|
454
|
+
<div class="fd-product-switch__text">
|
|
455
|
+
<div class="fd-product-switch__title">Home</div>
|
|
456
|
+
<div class="fd-product-switch__subtitle">Central Home</div>
|
|
457
|
+
</li>
|
|
458
|
+
<li class="fd-product-switch__item selected" tabindex="0" role="menuitem" aria-label="Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud" aria-posinset="2" aria-setsize="14">
|
|
459
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SAP Start">
|
|
460
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--business-objects-experience"></i>
|
|
461
|
+
</span>
|
|
462
|
+
<div class="fd-product-switch__text">
|
|
463
|
+
<div class="fd-product-switch__title">
|
|
464
|
+
Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud
|
|
465
|
+
</div>
|
|
466
|
+
<div class="fd-product-switch__subtitle">Analytics Cloud Analytics Cloud Analytics Cloud Analytics Cloud Analytics</div>
|
|
467
|
+
</div>
|
|
468
|
+
</li>
|
|
469
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Catalog Ariba" aria-posinset="3" aria-setsize="14">
|
|
470
|
+
<span
|
|
471
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
472
|
+
|
|
473
|
+
role="img"
|
|
474
|
+
aria-label="SAP Ariba"
|
|
475
|
+
></span>
|
|
476
|
+
<div class="fd-product-switch__text">
|
|
477
|
+
<div class="fd-product-switch__title">Catalog</div>
|
|
478
|
+
<div class="fd-product-switch__subtitle">Ariba</div>
|
|
479
|
+
</div>
|
|
480
|
+
</li>
|
|
481
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Guided Buying" aria-posinset="4" aria-setsize="14">
|
|
482
|
+
<span
|
|
483
|
+
class="fd-avatar fd-avatar--sm fd-avatar--thumbnail"
|
|
484
|
+
|
|
485
|
+
role="img"
|
|
486
|
+
aria-label="Business Data Cloud"
|
|
487
|
+
></span>
|
|
488
|
+
<div class="fd-product-switch__text">
|
|
489
|
+
<div class="fd-product-switch__title">Guided Buying</div>
|
|
490
|
+
</div>
|
|
491
|
+
</li>
|
|
492
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Strategic Procurement" aria-posinset="5" aria-setsize="14">
|
|
493
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Integration Suite">
|
|
494
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--cart-3"></i>
|
|
495
|
+
</span>
|
|
496
|
+
<div class="fd-product-switch__text">
|
|
497
|
+
<div class="fd-product-switch__title">Strategic Procurement</div>
|
|
498
|
+
</div>
|
|
499
|
+
</li>
|
|
500
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Travel & Expense Concur" aria-posinset="6" aria-setsize="14">
|
|
501
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA Cloud">
|
|
502
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--flight"></i>
|
|
503
|
+
</span>
|
|
504
|
+
<div class="fd-product-switch__text">
|
|
505
|
+
<div class="fd-product-switch__title">Travel & Expense</div>
|
|
506
|
+
<div class="fd-product-switch__subtitle">Concur</div>
|
|
507
|
+
</div>
|
|
508
|
+
</li>
|
|
509
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Vendor Management Fieldglass" aria-posinset="7" aria-setsize="14">
|
|
510
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="SuccessFactors">
|
|
511
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--shipping-status"></i>
|
|
512
|
+
</span>
|
|
513
|
+
<div class="fd-product-switch__text">
|
|
514
|
+
<div class="fd-product-switch__title">Vendor Management</div>
|
|
515
|
+
<div class="fd-product-switch__subtitle">Fieldglass</div>
|
|
516
|
+
</div>
|
|
517
|
+
</li>
|
|
518
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Product Management (very long text) ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lacus rhoncus, tempus diam non, mattis tellus." aria-posinset="8" aria-setsize="14">
|
|
519
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Concur">
|
|
520
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer"></i>
|
|
521
|
+
</span>
|
|
522
|
+
<div class="fd-product-switch__text">
|
|
523
|
+
<div class="fd-product-switch__title">
|
|
524
|
+
Product Management (very long text) ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lacus rhoncus, tempus diam non, mattis tellus.
|
|
525
|
+
</div>
|
|
526
|
+
</div>
|
|
527
|
+
</li>
|
|
528
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Sales Cloud Sales Cloud" aria-posinset="9" aria-setsize="14">
|
|
529
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Sales Cloud">
|
|
530
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--sales-notification"></i>
|
|
531
|
+
</span>
|
|
532
|
+
<div class="fd-product-switch__text">
|
|
533
|
+
<div class="fd-product-switch__title">Sales Cloud</div>
|
|
534
|
+
<div class="fd-product-switch__subtitle">Sales Cloud</div>
|
|
535
|
+
</div>
|
|
536
|
+
</li>
|
|
537
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Commerce Cloud Commerce Cloud" aria-posinset="10" aria-setsize="14">
|
|
538
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Commerce Cloud">
|
|
539
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--retail-store"></i>
|
|
540
|
+
</span>
|
|
541
|
+
<div class="fd-product-switch__text">
|
|
542
|
+
<div class="fd-product-switch__title">Commerce Cloud</div>
|
|
543
|
+
<div class="fd-product-switch__subtitle">Commerce Cloud</div>
|
|
544
|
+
</div>
|
|
545
|
+
</li>
|
|
546
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Marketing Cloud Marketing Cloud" aria-posinset="11" aria-setsize="14">
|
|
547
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Marketing Cloud">
|
|
548
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--marketing-campaign"></i>
|
|
549
|
+
</span>
|
|
550
|
+
<div class="fd-product-switch__text">
|
|
551
|
+
<div class="fd-product-switch__title">Marketing Cloud</div>
|
|
552
|
+
<div class="fd-product-switch__subtitle">Marketing Cloud</div>
|
|
553
|
+
</div>
|
|
554
|
+
</li>
|
|
555
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Service Cloud" aria-posinset="12" aria-setsize="14">
|
|
556
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Service Cloud">
|
|
557
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--family-care"></i>
|
|
558
|
+
</span>
|
|
559
|
+
<div class="fd-product-switch__text">
|
|
560
|
+
<div class="fd-product-switch__title">Service Cloud</div>
|
|
561
|
+
</div>
|
|
562
|
+
</li>
|
|
563
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="Customer Data Cloud" aria-posinset="13" aria-setsize="14">
|
|
564
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="Customer Data Cloud">
|
|
565
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--customer-briefing"></i>
|
|
566
|
+
</span>
|
|
567
|
+
<div class="fd-product-switch__text">
|
|
568
|
+
<div class="fd-product-switch__title">Customer Data Cloud</div>
|
|
569
|
+
</div>
|
|
570
|
+
</li>
|
|
571
|
+
<li class="fd-product-switch__item" tabindex="0" role="menuitem" aria-label="S/4HANA" aria-posinset="14" aria-setsize="14">
|
|
572
|
+
<span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="S/4HANA">
|
|
573
|
+
<i role="presentation" aria-hidden="true" class="fd-product-switch__icon sap-icon--batch-payments"></i>
|
|
574
|
+
</span>
|
|
575
|
+
<div class="fd-product-switch__text">
|
|
576
|
+
<div class="fd-product-switch__title">S/4HANA</div>
|
|
577
|
+
</div>
|
|
578
|
+
</li>
|
|
579
|
+
</ul>
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
462
582
|
```
|
|
463
583
|
|
|
464
584
|
## Accessibility
|