@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7
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/AI_USAGE.md +425 -0
- package/data/CHANGELOG.md +53 -3
- package/data/component-catalog.json +62 -209
- package/data/components/README.md +281 -0
- package/data/components/action-bar.md +443 -0
- package/data/components/ai-busy-indicator.md +79 -0
- package/data/components/ai-loading-bar.md +66 -0
- package/data/components/avatar-btp.md +198 -0
- package/data/components/avatar-group.md +2660 -0
- package/data/components/avatar-product-switch.md +476 -0
- package/data/components/avatar.md +993 -0
- package/data/components/bar.md +574 -0
- package/data/components/border-radius.md +148 -0
- package/data/components/border.md +412 -0
- package/data/components/breadcrumb.md +546 -0
- package/data/components/button-2.md +440 -0
- package/data/components/button-action-sheet.md +292 -0
- package/data/components/button-ai.md +730 -0
- package/data/components/button-btp.md +223 -0
- package/data/components/button-button.md +233 -0
- package/data/components/button-counter.md +176 -0
- package/data/components/button-patterns.md +731 -0
- package/data/components/button-split.md +459 -0
- package/data/components/button.md +469 -0
- package/data/components/calendar.md +5784 -0
- package/data/components/card-card-media.md +707 -0
- package/data/components/card-card.md +2426 -0
- package/data/components/card-layouts.md +1201 -0
- package/data/components/card.md +2404 -0
- package/data/components/carousel.md +1506 -0
- package/data/components/code.md +139 -0
- package/data/components/component-reset.md +272 -0
- package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
- package/data/components/components-icons-sap-icons.md +147 -0
- package/data/components/components-icons-tnt-icons.md +85 -0
- package/data/components/container-queries.md +221 -0
- package/data/components/container.md +227 -0
- package/data/components/dialog-docs-static-busy-indicator.md +165 -0
- package/data/components/dialog-docs-static-dialog.md +949 -0
- package/data/components/dialog-docs-static-patterns.md +147 -0
- package/data/components/dialog-docs-static-settings.md +528 -0
- package/data/components/dialog-docs-static.md +982 -0
- package/data/components/dialog.md +606 -0
- package/data/components/dynamic-page-dynamic-page.md +1914 -0
- package/data/components/dynamic-page.md +973 -0
- package/data/components/dynamic-side.md +197 -0
- package/data/components/elevation.md +110 -0
- package/data/components/feed-input.md +346 -0
- package/data/components/feed-list.md +580 -0
- package/data/components/fieldset-2.md +292 -0
- package/data/components/fieldset-forms.md +169 -0
- package/data/components/fieldset.md +381 -0
- package/data/components/flexible-column-layout.md +205 -0
- package/data/components/form-group.md +287 -0
- package/data/components/form-header.md +71 -0
- package/data/components/form-item-2.md +98 -0
- package/data/components/form-item-3.md +134 -0
- package/data/components/form-item-4.md +556 -0
- package/data/components/form-item-5.md +182 -0
- package/data/components/form-item-6.md +539 -0
- package/data/components/form-item-7.md +239 -0
- package/data/components/form-item-ai.md +158 -0
- package/data/components/form-item-file-uploader.md +445 -0
- package/data/components/form-item-forms.md +234 -0
- package/data/components/form-item-patterns.md +426 -0
- package/data/components/form-item.md +464 -0
- package/data/components/form-label-ai.md +126 -0
- package/data/components/form-label-layouts.md +306 -0
- package/data/components/form-label-patterns.md +1175 -0
- package/data/components/form-label-status-indicator.md +1083 -0
- package/data/components/form-label-step-input.md +620 -0
- package/data/components/form-label.md +2876 -0
- package/data/components/generic-tag.md +747 -0
- package/data/components/grid-list-grid-list.md +1185 -0
- package/data/components/grid-list.md +1449 -0
- package/data/components/heading.md +66 -0
- package/data/components/horizontal-navigation.md +568 -0
- package/data/components/icon-tab-bar-dev.md +190 -0
- package/data/components/icon-tab-bar.md +2620 -0
- package/data/components/icon.md +171 -0
- package/data/components/iconBusinessSuite.md +92 -0
- package/data/components/iconTnt.md +92 -0
- package/data/components/illustrated-message.md +439 -0
- package/data/components/info-label.md +348 -0
- package/data/components/input-group.md +2068 -0
- package/data/components/label.md +66 -0
- package/data/components/layout-grid.md +447 -0
- package/data/components/layout-panel.md +261 -0
- package/data/components/layouts-layout-grid.md +608 -0
- package/data/components/layouts-paddings.md +133 -0
- package/data/components/layouts-section.md +287 -0
- package/data/components/list-2.md +148 -0
- package/data/components/list-3.md +735 -0
- package/data/components/list-list.md +790 -0
- package/data/components/list-object-list.md +1225 -0
- package/data/components/list.md +1286 -0
- package/data/components/media-queries.md +168 -0
- package/data/components/menu.md +946 -0
- package/data/components/message-box-docs-static-ai.md +149 -0
- package/data/components/message-box-docs-static.md +527 -0
- package/data/components/message-page-upload-collection.md +678 -0
- package/data/components/message-page.md +256 -0
- package/data/components/message-strip.md +977 -0
- package/data/components/message-toast.md +119 -0
- package/data/components/micro-process-flow.md +991 -0
- package/data/components/navigation-menu.md +366 -0
- package/data/components/navigation-navigation.md +1245 -0
- package/data/components/navigation.md +2604 -0
- package/data/components/numeric-content.md +317 -0
- package/data/components/object-attribute.md +96 -0
- package/data/components/object-identifier.md +227 -0
- package/data/components/object-marker.md +202 -0
- package/data/components/object-number.md +327 -0
- package/data/components/object-status.md +1538 -0
- package/data/components/off-screen.md +87 -0
- package/data/components/overflow.md +97 -0
- package/data/components/padding.md +122 -0
- package/data/components/paddings.md +130 -0
- package/data/components/page.md +300 -0
- package/data/components/pagination.md +672 -0
- package/data/components/panel-layouts.md +345 -0
- package/data/components/panel.md +514 -0
- package/data/components/patterns-label.md +74 -0
- package/data/components/popover-2.md +906 -0
- package/data/components/popover-ai.md +466 -0
- package/data/components/popover-btp.md +886 -0
- package/data/components/popover-deprecated.md +308 -0
- package/data/components/popover-message-popover.md +683 -0
- package/data/components/popover-notification.md +1511 -0
- package/data/components/popover-patterns.md +1100 -0
- package/data/components/popover-popover.md +1862 -0
- package/data/components/popover-quick-view.md +385 -0
- package/data/components/popover-timepicker.md +1836 -0
- package/data/components/popover-user-menu.md +1303 -0
- package/data/components/popover.md +1938 -0
- package/data/components/progress-indicator.md +351 -0
- package/data/components/prompt-input-ai.md +226 -0
- package/data/components/prompt-input.md +226 -0
- package/data/components/rating-indicator.md +1469 -0
- package/data/components/resizable-card-layout.md +951 -0
- package/data/components/scrollbar.md +86 -0
- package/data/components/search-field.md +287 -0
- package/data/components/section.md +250 -0
- package/data/components/segmented-button.md +324 -0
- package/data/components/shellbar.md +2183 -0
- package/data/components/side-nav.md +1562 -0
- package/data/components/skeleton.md +243 -0
- package/data/components/slider.md +395 -0
- package/data/components/splitter.md +353 -0
- package/data/components/table.md +2749 -0
- package/data/components/tabs.md +658 -0
- package/data/components/text-text.md +380 -0
- package/data/components/text.md +253 -0
- package/data/components/tile.md +1132 -0
- package/data/components/time.md +818 -0
- package/data/components/title.md +153 -0
- package/data/components/titles.md +83 -0
- package/data/components/token.md +311 -0
- package/data/components/tokenizer.md +398 -0
- package/data/components/tool-header.md +1352 -0
- package/data/components/tool-layout.md +199 -0
- package/data/components/toolbar-ai.md +174 -0
- package/data/components/toolbar-btp.md +526 -0
- package/data/components/toolbar-title-bar.md +473 -0
- package/data/components/toolbar.md +432 -0
- package/data/components/tree.md +1031 -0
- package/data/components/typography.md +435 -0
- package/data/components/variant-management.md +360 -0
- package/data/components/vertical-nav.md +589 -0
- package/data/components/wizard.md +1429 -0
- package/data/examples/Components/dialog/device-specifications.example.html +39 -30
- package/data/examples/Components/shellbar/optional-items.example.html +210 -157
- package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
- package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
- package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
- package/data/examples/Components/user-menu/default.example.html +241 -83
- package/data/schemas/badge.schema.json +1 -1
- package/data/schemas/button-split.schema.json +1 -1
- package/data/schemas/component-frontmatter.schema.json +123 -0
- package/data/schemas/component-markdown.schema.json +81 -0
- package/data/schemas/counter.schema.json +1 -1
- package/data/schemas/dynamic-page.schema.json +1 -1
- package/data/schemas/dynamic-side-content.schema.json +1 -1
- package/data/schemas/facet.schema.json +1 -1
- package/data/schemas/fieldset.schema.json +1 -1
- package/data/schemas/flexible-column-layout.schema.json +1 -1
- package/data/schemas/form-group.schema.json +3 -2
- package/data/schemas/form-header.schema.json +1 -1
- package/data/schemas/form-label.schema.json +1 -0
- package/data/schemas/form-message.schema.json +1 -1
- package/data/schemas/grid-list.schema.json +1 -1
- package/data/schemas/input-group.schema.json +1 -1
- package/data/schemas/layout-panel.schema.json +1 -1
- package/data/schemas/page.schema.json +1 -1
- package/data/schemas/quick-view.schema.json +2 -1
- package/data/schemas/section.schema.json +1 -1
- package/data/schemas/side-nav.schema.json +1 -1
- package/data/schemas/splitter.schema.json +1 -1
- package/data/schemas/tabs.schema.json +1 -1
- package/data/schemas/tile.schema.json +1 -1
- package/data/schemas/tool-layout.schema.json +1 -1
- package/data/schemas/user-menu.schema.json +10 -0
- package/data/schemas/wizard.schema.json +1 -1
- package/package.json +1 -1
- package/src/data/load-catalog.d.ts +2 -0
- package/src/data/load-catalog.js +5 -1
- package/src/data/load-catalog.js.map +1 -1
- package/src/data/load-markdown-docs.d.ts +44 -0
- package/src/data/load-markdown-docs.js +179 -0
- package/src/data/load-markdown-docs.js.map +1 -0
- package/src/data/markdown-cache.d.ts +60 -0
- package/src/data/markdown-cache.js +218 -0
- package/src/data/markdown-cache.js.map +1 -0
- package/src/server.js +72 -1
- package/src/server.js.map +1 -1
|
@@ -0,0 +1,439 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: fd-illustrated-message
|
|
3
|
+
title: Components/Illustrated Message
|
|
4
|
+
category: Components
|
|
5
|
+
selector: fd-illustrated-message
|
|
6
|
+
cssFile: illustrated-message.css
|
|
7
|
+
sourcePath: packages/styles/stories/Components/illustrated-message/illustrated-message.stories.js
|
|
8
|
+
tags: []
|
|
9
|
+
dependencies: ["button","icon","illustrated-message","message-strip"]
|
|
10
|
+
relatedComponents: ["button","icon","illustrated-message","message-strip"]
|
|
11
|
+
stability: stable
|
|
12
|
+
generatedAt: 2026-06-09T18:29:01.637Z
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Components/Illustrated Message
|
|
16
|
+
|
|
17
|
+
Illustrated messages for SAP are a simple yet powerful way to engage users and add personality to the experience.
|
|
18
|
+
|
|
19
|
+
## Structure
|
|
20
|
+
**Illustration** - \
|
|
21
|
+
|
|
22
|
+
## Dependencies
|
|
23
|
+
|
|
24
|
+
This component depends on the following CSS files:
|
|
25
|
+
|
|
26
|
+
- `button.css`
|
|
27
|
+
- `icon.css`
|
|
28
|
+
- `illustrated-message.css`
|
|
29
|
+
- `message-strip.css`
|
|
30
|
+
|
|
31
|
+
## Installation
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install fundamental-styles
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!-- Include theme -->
|
|
39
|
+
<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
|
|
40
|
+
|
|
41
|
+
<!-- Include component CSS -->
|
|
42
|
+
<link href="node_modules/fundamental-styles/dist/illustrated-message.css" rel="stylesheet">
|
|
43
|
+
|
|
44
|
+
<!-- Include dependencies -->
|
|
45
|
+
<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
|
|
46
|
+
<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
|
|
47
|
+
<link href="node_modules/fundamental-styles/dist/illustrated-message.css" rel="stylesheet">
|
|
48
|
+
<link href="node_modules/fundamental-styles/dist/message-strip.css" rel="stylesheet">
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Basic Usage
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<section role="region" aria-label="Illustrated message" aria-describedby="title-large" class="fd-illustrated-message-responsive-container">
|
|
55
|
+
<figure class="fd-illustrated-message">
|
|
56
|
+
<div class="fd-illustrated-message__container">
|
|
57
|
+
<svg class="fd-illustrated-message__illustration" role="img" aria-label="Illustration of a melting icecream" width="320" height="240" viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-Ice-Cream-Demo-Largev2">
|
|
58
|
+
<path d="M0 49C0 35.7452 10.7452 25 24 25H296C309.255 25 320 35.7452 320 49V139C320 152.255 309.255 163 296 163H24C10.7452 163 0 152.255 0 139V49Z" fill="var(--sapContent_Illustrative_Color20)"/><path d="M191.976 35.763L192.395 37.2842C192.289 37.2919 192.189 37.2995 192.082 37.3072C191.953 36.7873 191.831 36.2752 191.693 35.7783C191.876 35.763 191.968 35.7554 191.976 35.763Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
59
|
+
<path d="M207.132 8.78126C206.59 9.62947 206.522 10.7986 207.094 13.3356C207.643 15.7962 206.621 15.246 206.621 15.246C206.621 15.246 205.484 12.2811 204.301 10.1567C203.767 9.20154 203.057 9.1022 203.56 10.3325C204.247 11.9831 205.163 15.1772 205.415 16.2929C205.575 16.9883 205.789 17.8976 204.522 17.7524C203.049 17.5843 201.126 17.5385 199.218 17.5614C199.378 17.9588 199.523 18.379 199.668 18.8222C201.683 18.8757 203.034 19.0133 203.034 19.212C204.24 23.8198 201.614 23.8198 201.576 25.5315C201.569 25.9136 201.721 27.3808 201.767 27.6941C201.958 29.0314 201.004 28.6493 201.004 28.6493C199.836 24.4923 198.44 21.1376 197.333 18.7993C197.127 18.3714 196.936 17.974 196.761 17.6149C196.432 16.9577 196.15 16.4152 195.929 16.0025C195.349 14.9174 194.601 15.2078 195.044 16.1324C195.288 16.6444 195.517 17.1487 195.73 17.6607C194.296 17.7295 193.09 17.8212 192.372 17.9129C190.61 18.1269 190.777 19.0133 192.563 18.9292C193.8 18.8681 195.044 18.8299 196.219 18.807C197.241 21.321 197.989 23.7434 198.531 25.9136C197.936 25.8448 195.204 25.6844 191.449 25.8295C191.625 26.2345 191.8 26.6778 191.983 27.1592C194.097 27.1745 196.463 27.2662 198.905 27.4801C199.401 29.6962 199.676 31.5683 199.829 32.8903C199.958 34.0289 199.096 35.03 197.959 35.0682C197.196 35.0911 196.379 35.114 195.791 35.1369C195.326 35.1522 194.99 35.542 195.028 36.0004C195.227 38.2776 195.341 38.9119 195.417 39.7677C195.547 41.0897 194.547 40.7611 194.547 40.7611C193.136 35.0452 191.495 30.4603 190.121 27.1592C189.938 26.7236 189.762 26.311 189.595 25.9212C188.892 24.3242 188.297 23.1015 187.87 22.2915C187.236 21.0841 186.542 21.6573 187.107 22.7424C187.107 22.7424 187.687 23.9039 188.511 25.99C186.786 26.1276 184.947 26.3262 183.047 26.6166C181.246 26.8917 181.276 27.6329 183.047 27.503C183.069 27.4725 185.42 27.2432 188.969 27.1745C189.801 29.3676 190.793 32.2943 191.693 35.7788C190.777 35.8247 187.725 36.0692 183.527 36.5965C183.688 37.0473 183.863 37.5364 184.031 38.056C186.725 37.7351 189.442 37.4753 192.082 37.3071C192.8 40.2797 193.433 43.6038 193.845 47.18C193.914 47.7379 193.494 48.2346 192.937 48.2651C191.403 48.3492 188.595 48.5249 187.618 48.7236C186.664 48.9147 186.923 49.4037 187.015 50.4353C187.107 51.5204 187.236 52.2769 187.297 53.362C187.343 54.0727 187.229 54.7681 186.511 54.8369C186.427 54.8521 186.382 54.8521 186.382 54.8521C186.382 54.8521 184.504 45.9574 181.856 38.3235C181.688 37.8421 181.513 37.3606 181.345 36.8945C180.429 34.4263 179.444 32.1644 178.414 30.4909C177.704 29.3294 176.834 29.6656 177.529 30.7431C177.529 30.7431 178.536 33.0126 179.879 37.1008C177.071 37.5058 173.972 38.0255 170.775 38.6673C170.973 39.0647 171.172 39.4697 171.37 39.8976C174.14 39.4239 177.185 38.9424 180.337 38.5145C181.23 41.3419 182.23 44.8646 183.184 48.9834C182.467 49.0293 179.429 49.3502 175.102 49.9768C175.239 50.4582 175.369 50.932 175.491 51.4134C178.078 51.039 180.772 50.6951 183.512 50.42C183.993 52.6284 184.458 54.9897 184.886 57.4885C185.206 59.3683 185.382 61.2405 185.466 62.3103C185.504 62.8146 185.145 63.2578 184.642 63.3342C183.359 63.5176 180.971 63.8692 179.46 64.1213C178.918 64.213 178.452 64.7327 178.429 65.2828C178.353 67.5142 178.971 68.9431 178.017 69.1342C177.926 69.1495 177.682 69.1724 177.407 69.18V69.0501C177.407 69.0501 176.125 60.3923 173.66 51.6962C173.522 51.2148 173.385 50.7257 173.24 50.2443C172.156 46.6222 170.866 43.0842 169.378 40.2491C169.172 39.8441 168.959 39.4621 168.737 39.0876C168.585 38.8202 168.424 38.568 168.264 38.3158C167.531 37.162 166.684 37.4829 167.379 38.568C167.379 38.568 167.501 38.8202 167.715 39.3092C165.15 39.89 162.571 40.5395 160.083 41.2884C159.152 41.5711 158.663 41.915 158.824 42.0831C158.969 42.2359 159.617 42.2436 160.93 41.9456C162.67 41.5482 165.196 41.0209 168.203 40.4707C169.02 42.4346 170.309 45.881 171.584 50.5041C168.745 50.9549 165.555 51.5128 162.22 52.1852C162.38 52.6437 162.54 53.1404 162.701 53.6601C165.463 53.0946 168.6 52.5062 171.981 51.956C172.904 55.5169 173.797 59.6969 174.453 64.3811L171.569 64.9848C171.569 64.9848 166.883 61.5079 162.357 58.8334C161.915 57.1904 161.426 55.5704 160.892 54.0268C160.724 53.5301 160.556 53.0411 160.381 52.5673C159.335 49.7323 158.198 47.2259 157.099 45.4301C156.794 44.9181 156.45 44.6965 156.221 44.6965C155.924 44.6965 155.817 45.071 156.214 45.6823C156.214 45.6823 157.465 48.2651 158.984 52.8653C156.908 53.3238 154.809 53.8205 152.718 54.3631C147.185 52.3992 146.926 53.6524 149.109 54.2485C154.451 55.708 167.058 61.6837 174.926 70.3186C177.91 73.5968 179.07 77.815 171.584 86.8549L128.869 56.8542C128.869 56.8542 132.037 54.3784 134.578 52.4068C136.44 50.9626 137.936 50.5041 140.035 50.7563C140.325 50.5576 150.986 42.8473 163.853 33.5246C183.939 18.9827 209.422 0.520745 209.422 0.520745C209.544 0.429047 209.673 0.352632 209.795 0.283858C209.818 0.276216 209.841 0.268574 209.864 0.260933C211.131 -0.159352 211.993 1.4683 210.757 3.14944C209.956 4.24218 208.33 6.89379 207.132 8.78126Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
60
|
+
<path d="M159.457 54.3324C159.786 55.3869 160.121 56.5332 160.457 57.7558C159.847 57.4196 159.251 57.1216 158.687 56.8541C157.366 56.2351 156.183 55.7155 155.13 55.2799C156.336 55.0125 157.794 54.6839 159.457 54.3324Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
61
|
+
<path d="M158.686 56.854C157.366 56.235 156.183 55.7154 155.13 55.2798C156.335 55.0124 157.793 54.6838 159.457 54.3323C159.785 55.3868 160.121 56.533 160.457 57.7557C159.846 57.4195 159.251 57.1214 158.686 56.854Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
62
|
+
<path d="M213.527 3.63092C213.527 3.63092 185.626 78.8314 185.206 79.9776C186.03 82.4535 186.031 83.6073 184.405 87.4739C182.795 91.2871 181.566 93.8699 181.566 93.8699L171.584 86.855C179.07 77.815 177.91 73.5969 174.926 70.3187C167.058 61.6837 154.451 55.708 149.109 54.2485C146.926 53.6525 147.185 52.3993 152.718 54.3631C154.809 53.8206 156.908 53.3239 158.984 52.8654C157.465 48.2652 156.214 45.6823 156.214 45.6823C155.817 45.071 155.924 44.6966 156.221 44.6966C156.45 44.6966 156.794 44.9182 157.099 45.4302C158.198 47.2259 159.335 49.7324 160.38 52.5674C160.556 53.0411 160.724 53.5302 160.892 54.0269C161.426 55.5705 161.914 57.1905 162.357 58.8334C166.883 61.508 171.568 64.9849 171.568 64.9849L174.453 64.3812C173.797 59.6969 172.904 55.517 171.981 51.956C168.6 52.5062 165.463 53.0946 162.7 53.6601C162.54 53.1405 162.38 52.6438 162.22 52.1853C165.555 51.5128 168.745 50.955 171.584 50.5042C170.309 45.881 169.019 42.4347 168.203 40.4708C165.196 41.021 162.67 41.5483 160.93 41.9456C159.617 42.2436 158.969 42.236 158.824 42.0832C158.663 41.9151 159.152 41.5712 160.083 41.2884C162.571 40.5396 165.15 39.89 167.714 39.3093C167.501 38.8202 167.379 38.5681 167.379 38.5681C166.684 37.483 167.531 37.162 168.264 38.3159C168.424 38.5681 168.585 38.8202 168.737 39.0877C168.958 39.4621 169.172 39.8442 169.378 40.2492C170.866 43.0842 172.156 46.6222 173.24 50.2443C173.385 50.7258 173.522 51.2148 173.66 51.6962C176.125 60.3923 177.399 69.0502 177.399 69.0502V69.1801C177.681 69.1724 177.926 69.1495 178.017 69.1342C178.971 68.9432 178.353 67.5142 178.429 65.2829C178.452 64.7327 178.918 64.2131 179.46 64.1214C180.971 63.8692 183.359 63.5177 184.641 63.3343C185.145 63.2579 185.504 62.8147 185.466 62.3103C185.382 61.2405 185.206 59.3683 184.886 57.4885C184.458 54.9897 183.993 52.6285 183.512 50.4201C180.772 50.6952 178.078 51.0391 175.491 51.4135C175.369 50.9321 175.239 50.4583 175.102 49.9769C179.429 49.3503 182.466 49.0293 183.184 48.9835C182.23 44.8647 181.23 41.3419 180.337 38.5146C177.185 38.9425 174.14 39.4239 171.37 39.8977C171.172 39.4698 170.973 39.0648 170.775 38.6674C173.972 38.0255 177.071 37.5059 179.879 37.1009C178.536 33.0127 177.529 30.7431 177.529 30.7431C176.834 29.6657 177.704 29.3294 178.414 30.4909C179.444 32.1644 180.429 34.4263 181.345 36.8946C181.513 37.3607 181.688 37.8421 181.856 38.3235C184.504 45.9574 186.382 54.8522 186.382 54.8522C186.382 54.8522 186.427 54.8522 186.511 54.8369C187.229 54.7681 187.343 54.0728 187.297 53.3621C187.236 52.277 187.107 51.5205 187.015 50.4354C186.923 49.4038 186.664 48.9147 187.618 48.7237C188.595 48.525 191.403 48.3492 192.937 48.2652C193.494 48.2346 193.914 47.7379 193.845 47.1801C193.433 43.6038 192.8 40.2798 192.082 37.3072C189.442 37.4753 186.725 37.7351 184.031 38.0561C183.863 37.5364 183.688 37.0474 183.527 36.5965C187.725 36.0693 190.777 35.8247 191.693 35.7789C190.793 32.2944 189.801 29.3676 188.969 27.1745C185.42 27.2433 183.069 27.4725 183.047 27.5031C181.276 27.633 181.245 26.8918 183.047 26.6167C184.947 26.3263 186.786 26.1276 188.511 25.9901C187.686 23.9039 187.107 22.7424 187.107 22.7424C186.542 21.6573 187.236 21.0842 187.87 22.2916C188.297 23.1016 188.892 24.3242 189.594 25.9213C189.762 26.311 189.938 26.7237 190.121 27.1592C191.495 30.4604 193.136 35.0453 194.547 40.7612C194.547 40.7612 195.547 41.0898 195.417 39.7678C195.341 38.9119 195.227 38.2777 195.028 36.0005C194.99 35.542 195.326 35.1523 195.791 35.137C196.379 35.1141 197.196 35.0912 197.959 35.0682C199.096 35.03 199.958 34.029 199.829 32.8904C199.676 31.5684 199.401 29.6962 198.905 27.4802C196.463 27.2662 194.097 27.1745 191.983 27.1592C191.8 26.6778 191.624 26.2346 191.449 25.8296C195.204 25.6844 197.936 25.8449 198.531 25.9137C197.989 23.7435 197.241 21.3211 196.219 18.807C195.043 18.8299 193.799 18.8682 192.563 18.9293C190.777 19.0133 190.609 18.1269 192.372 17.913C193.09 17.8213 194.296 17.7296 195.73 17.6608C195.517 17.1488 195.288 16.6445 195.043 16.1325C194.601 15.2079 195.349 14.9175 195.929 16.0026C196.15 16.4152 196.432 16.9578 196.761 17.6149C196.936 17.9741 197.127 18.3715 197.333 18.7994C198.44 21.1377 199.836 24.4923 201.004 28.6493C201.004 28.6493 201.958 29.0314 201.767 27.6941C201.721 27.3808 201.569 25.9137 201.576 25.5316C201.614 23.8199 204.24 23.8199 203.034 19.212C203.034 19.0133 201.683 18.8758 199.668 18.8223C199.523 18.3791 199.378 17.9588 199.218 17.5615C201.126 17.5385 203.049 17.5844 204.522 17.7525C205.789 17.8977 205.575 16.9883 205.415 16.293C205.163 15.1773 204.247 11.9831 203.56 10.3326C203.057 9.10226 203.766 9.2016 204.301 10.1568C205.484 12.2811 206.621 15.2461 206.621 15.2461C206.621 15.2461 207.643 15.7963 207.094 13.3357C206.521 10.7987 206.59 9.62953 207.132 8.78132C208.33 6.89386 209.956 4.24224 210.757 3.1495C211.993 1.46836 211.131 -0.15929 209.864 0.260995C211.94 -0.740047 214.382 1.30025 213.527 3.63092Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
63
|
+
<path d="M69.9987 108.978C74.2979 108.978 77.783 107.873 77.783 106.51C77.783 105.146 74.2979 104.041 69.9987 104.041C65.6996 104.041 62.2144 105.146 62.2144 106.51C62.2144 107.873 65.6996 108.978 69.9987 108.978Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
64
|
+
<path d="M101.975 119.033C101.975 115.426 94.7016 112.499 85.7268 112.499C76.7519 112.499 69.4789 115.426 69.4789 119.033C69.4789 122.64 76.7519 125.566 85.7268 125.566C94.7016 125.566 101.975 122.64 101.975 119.033Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
65
|
+
<path d="M241.275 96.6741C234.735 97.2014 213.847 99.043 197.981 100.449C184.732 95.1305 163.257 92.6852 139.019 92.6852C98.7924 92.6852 111.354 100.105 111.354 115.556C111.354 126.224 75.7906 138.794 98.6627 143.509C104.768 144.77 131.402 147.07 130.136 140.965C131.402 141.217 136.737 142.233 140.538 142.233C179.833 142.233 210.421 130.847 211.817 115.923C224.661 109.734 245.572 99.6772 247.343 98.9895C251.197 97.4918 247.984 96.1392 241.275 96.6818V96.6741Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
66
|
+
<path d="M187.739 118.093C187.739 120.05 187.266 122.227 186.297 124.413C188.487 113.302 178.978 109.833 174.376 109.199C171.064 108.924 181.183 107.831 182.969 97.4383C182.74 100.961 181.977 104.354 180.771 107.571C184.923 109.588 187.739 113.539 187.739 118.093Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
67
|
+
<path d="M174.375 109.198C178.977 109.832 188.486 113.301 186.296 124.412C184.029 129.585 179.046 134.789 171.246 137.235C160.188 140.704 147.626 141.972 136.461 141.544V141.445C141.04 141.636 145.077 141.071 146.627 140.459C153.732 137.663 149.488 130.51 143.581 130.036C127.593 128.768 122.48 126.338 126.456 126.483C133.561 126.735 142.948 125.719 148.153 122.288C153.358 118.857 152.48 111.865 146.886 111.742C139.354 111.574 137.491 113.095 141.719 109.71C161.913 93.5402 152.93 57.816 133.317 55.4853C140.605 55.898 149.778 58.3738 156.777 62.3551C169.3 69.477 180.809 82.5211 182.801 91.0796C183.106 92.4016 183.045 93.8 183.045 95.1908C183.045 95.9473 183.022 96.6962 182.969 97.4374C181.183 107.83 171.063 108.923 174.375 109.198Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
68
|
+
<path d="M146.885 111.743C152.479 111.866 153.357 118.858 148.152 122.289C142.947 125.72 133.56 126.736 126.455 126.484C122.479 126.339 127.592 128.769 143.581 130.037C149.488 130.511 153.731 137.664 146.626 140.46C145.077 141.072 141.039 141.637 136.46 141.446C132.133 141.27 127.325 140.414 123.662 138.298C120.365 136.387 113.634 132.2 109.956 131.306C106.323 130.435 104.377 131.306 106.277 132.322C111.825 135.287 105.552 141.95 95.4098 142.195C86.786 141.224 82.5047 138.55 82.5047 134.783C82.5047 132.59 84.6644 131.138 87.8392 130.267C83.6647 129.181 81.8255 127.057 81.8255 123.771C81.8255 123.412 81.8713 123.068 81.94 122.724H81.9018C82.7641 120.126 84.7942 119.545 86.0992 119.125C86.5037 118.995 86.5037 118.437 86.0992 118.292C84.0539 117.52 82.6649 116.061 82.6649 116.061C82.6649 120.806 78.9483 122.197 76.0178 122.564C68.5998 121.563 67.9511 118.178 67.9511 115.472C67.9511 110.215 73.1559 108.053 79.2001 107.082C80.5357 100.625 84.0844 96.5673 89.4189 95.3599C89.3808 97.2627 89.4571 99.4252 89.77 101.58C89.77 101.58 95.1045 101.58 96.7529 106.662C96.7529 106.662 94.3185 110.414 93.3492 112.935C93.2348 113.226 93.5324 113.516 93.8148 113.386C95.5777 112.569 100.279 111.04 105.758 114.54C105.758 114.54 107.918 104.881 115.275 106.028C114.138 110.475 120.098 115.931 129.615 109.329C132.126 107.586 128.737 109.084 124.67 109.199C120.358 109.329 113.978 106.555 116.42 99.8837C117.351 97.3391 119.297 95.8184 120.434 94.2519C122.151 91.8907 122.479 89.8045 120.358 87.4738C117.687 84.5548 117.946 81.1619 117.687 79.5572L89.9379 89.239C92.8685 71.9921 108.307 57.817 128.18 55.5857C129.722 55.4099 131.454 55.387 133.309 55.4863C152.922 57.817 161.904 93.5412 141.711 109.711C137.483 113.096 139.345 111.575 146.878 111.743H146.885ZM104.926 129.976C105.117 130.022 105.3 130.075 105.484 130.121C105.468 130.022 105.445 129.915 105.438 129.816C105.27 129.869 105.102 129.923 104.926 129.976Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
69
|
+
<path d="M136.462 141.447V141.546C126.159 141.156 117.047 139.307 111.399 136.396C110.98 140.018 107.232 143.135 97.5632 142.402C96.8153 142.348 96.0979 142.28 95.411 142.196C105.553 141.951 111.827 135.288 106.278 132.323C104.378 131.306 106.324 130.435 109.957 131.306C113.635 132.2 120.367 136.388 123.663 138.298C127.327 140.415 132.135 141.271 136.462 141.447Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
70
|
+
<path d="M124.679 109.198C128.747 109.083 132.136 107.586 129.625 109.328C120.108 115.93 114.148 110.474 115.285 106.027C107.928 104.88 105.768 114.539 105.768 114.539C100.289 111.04 95.5876 112.568 93.8247 113.386C93.5423 113.515 93.2447 113.225 93.3591 112.935C94.3284 110.413 96.7628 106.661 96.7628 106.661C95.1144 101.579 89.7799 101.579 89.7799 101.579C89.467 99.4244 89.3907 97.2619 89.4288 95.3591C89.4288 95.3515 89.4441 95.3515 89.4517 95.3515C89.4517 95.298 89.4517 95.2445 89.4517 95.191C89.4517 94.8777 89.4518 94.572 89.467 94.2664C89.467 94.2052 89.467 94.1441 89.4747 94.083C89.5204 92.9902 89.5968 92.0274 89.6731 91.248C89.6807 91.1715 89.6883 91.0951 89.6959 91.0264C89.7646 90.4227 89.8562 89.8343 89.9555 89.2382L117.704 79.5564C117.964 81.1611 117.704 84.554 120.375 87.473C122.497 89.8037 122.169 91.8899 120.452 94.2511C119.314 95.8176 117.368 97.3383 116.437 99.8829C113.995 106.554 120.375 109.328 124.687 109.198H124.679Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
71
|
+
<path d="M89.4674 94.0842C89.4903 93.129 89.5591 92.1815 89.6661 91.2492C89.5897 92.0286 89.5133 92.9915 89.4674 94.0842Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
72
|
+
<path d="M86.1074 118.293C86.5042 118.438 86.5042 118.996 86.1074 119.126C84.8023 119.546 82.7723 120.127 81.91 122.725C81.0934 122.824 80.2692 122.862 79.4679 122.839C78.1857 122.801 77.0486 122.71 76.0336 122.564C78.9642 122.198 82.6808 120.807 82.6808 116.061C82.6808 116.061 84.0697 117.521 86.115 118.293H86.1074Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
73
|
+
<path d="M71.0204 104.774C71.0204 106.47 70.4099 107.594 66.014 107.594C61.6182 107.594 61 106.47 61 104.774C61 103.078 63.2438 101.702 66.014 101.702C68.7843 101.702 71.0204 103.078 71.0204 104.774Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
74
|
+
<path d="M117.78 79.7266C118.375 81.9426 115.262 83.8072 114.231 85.7405C113.552 87.009 112.965 88.7054 112.369 90.3942C110.843 91.0743 108.393 90.654 104.753 95.1396C104.417 95.5522 104.142 95.9496 103.906 96.3164C102.105 95.6057 100.136 93.8405 97.6479 87.4751C95.8926 82.9819 90.4208 81.3772 89.566 86.0691C88.8868 89.8287 93.4887 98.3949 101.563 99.4571C101.22 99.6939 100.8 99.8926 100.273 100.053C99.9755 100.145 99.6551 100.206 99.304 100.244V100.183C95.9995 100.053 92.382 97.0652 91.306 95.7356C84.3459 87.1236 87.9939 77.5869 91.4357 79.2146C98.4111 82.5234 103.616 78.5804 107.165 74.5151C109.92 71.3667 112.591 71.4202 114.773 73.6592C116.033 75.1417 117.086 77.1208 117.78 79.7266ZM114.781 78.5804C115.575 77.7856 115.178 76.0128 114.018 74.8971C112.369 73.3077 110.912 73.3077 110.4 74.133C109.904 74.943 110.927 76.3643 111.988 77.564C113.003 78.7103 114.27 79.0923 114.781 78.5804Z" fill="var(--sapContent_Illustrative_Color23)"/>
|
|
75
|
+
<path d="M114.017 74.8962C115.177 76.0119 115.574 77.7847 114.78 78.5794C114.269 79.0914 113.002 78.7093 111.987 77.5631C110.926 76.3634 109.903 74.9421 110.399 74.1321C110.911 73.3068 112.368 73.3068 114.017 74.8962Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
76
|
+
<path d="M114.772 73.6589C112.59 71.4199 109.919 71.3664 107.164 74.5147C103.615 78.58 98.4101 82.5231 91.4348 79.2143C87.9929 77.5866 84.3449 87.1233 91.305 95.7353C92.3811 97.0649 95.9985 100.053 99.2954 100.183V100.244C95.5101 100.618 89.0613 97.4546 86.7871 89.324C84.0321 79.4741 88.26 71.3359 99.7609 71.2518C103.378 69.4102 110.369 68.4856 114.772 73.6589ZM103.615 75.9131C105.767 73.3074 107.377 71.7409 105.767 71.7179C100.57 71.6568 97.9675 75.4699 98.7917 77.1205C99.8983 79.3366 101.982 77.877 103.615 75.9131Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
77
|
+
<path d="M105.767 71.7176C107.377 71.7405 105.767 73.3071 103.615 75.9128C101.981 77.8767 99.8981 79.3362 98.7915 77.1202C97.9673 75.4696 100.57 71.6565 105.767 71.7176Z" fill="var(--sapContent_Illustrative_Color23)"/>
|
|
78
|
+
<path d="M103.905 96.3153C103.004 97.6908 102.615 98.7377 101.562 99.456C93.4874 98.3938 88.8855 89.8276 89.5647 86.068C90.4195 81.3761 95.8913 82.9808 97.6466 87.474C100.135 93.8394 102.103 95.6046 103.905 96.3153Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
79
|
+
<path d="M98.701 76.9295C98.701 76.9295 97.5258 66.4453 83.7583 56.2209C82.3312 55.1588 84.1399 52.5377 85.6586 53.7451C87.1849 54.9524 99.1742 66.2314 100.632 78.1751C99.7466 78.3661 98.9529 78.2057 98.6934 76.9372L98.701 76.9295Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
80
|
+
</svg>
|
|
81
|
+
|
|
82
|
+
<figcaption class="fd-illustrated-message__figcaption">
|
|
83
|
+
<h2 class="fd-illustrated-message__title" id="title-large">Delivery Delay</h2>
|
|
84
|
+
<p class="fd-illustrated-message__text">A broken cooling system resulted in melted ice cream in transit. Another delivery is already on the way.</p>
|
|
85
|
+
</figcaption>
|
|
86
|
+
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="fd-illustrated-message__actions">
|
|
90
|
+
<button type="button" class="fd-button">Check Delivery Schedule</button>
|
|
91
|
+
</div>
|
|
92
|
+
</figure>
|
|
93
|
+
</section>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Modifiers
|
|
97
|
+
|
|
98
|
+
| Class | Description |
|
|
99
|
+
|-------|-------------|
|
|
100
|
+
| `fd-illustrated-message--base` | Text-only variant without illustration, providing a minimal presentation for extremely constrained spaces |
|
|
101
|
+
| `fd-illustrated-message--medium` | A balanced size variant suitable for dialogs, panels, or section-level empty states |
|
|
102
|
+
| `fd-illustrated-message--small` | A compact size designed for narrow panels, sidebars, or smaller dialog windows |
|
|
103
|
+
| `fd-illustrated-message--xsmall` | The most compact illustrated version featuring a minimal icon and condensed spacing, ideal for inline messages, mobile interfaces, or narrow cards |
|
|
104
|
+
|
|
105
|
+
## BEM Elements
|
|
106
|
+
|
|
107
|
+
This component uses the following BEM elements:
|
|
108
|
+
|
|
109
|
+
- `fd-illustrated-message__actions`
|
|
110
|
+
- `fd-illustrated-message__container`
|
|
111
|
+
- `fd-illustrated-message__figcaption`
|
|
112
|
+
- `fd-illustrated-message__illustration`
|
|
113
|
+
- `fd-illustrated-message__text`
|
|
114
|
+
- `fd-illustrated-message__title`
|
|
115
|
+
|
|
116
|
+
## Component Structure
|
|
117
|
+
|
|
118
|
+
**Illustration** - \
|
|
119
|
+
|
|
120
|
+
## Related Components
|
|
121
|
+
|
|
122
|
+
This component works with or depends on:
|
|
123
|
+
|
|
124
|
+
- `button`
|
|
125
|
+
- `icon`
|
|
126
|
+
- `illustrated-message`
|
|
127
|
+
- `message-strip`
|
|
128
|
+
|
|
129
|
+
## Design Tokens
|
|
130
|
+
|
|
131
|
+
Key CSS variables used by this component:
|
|
132
|
+
|
|
133
|
+
- `--actionsMarginBlockStart`
|
|
134
|
+
- `--base`
|
|
135
|
+
- `--containerFlexAlignment`
|
|
136
|
+
- `--dialog`
|
|
137
|
+
- `--dot`
|
|
138
|
+
- `--figcaptionMaxWidth`
|
|
139
|
+
- `--illustratedMessagePadding`
|
|
140
|
+
- `--illustrationDisplay`
|
|
141
|
+
- `--illustrationMarginBlock`
|
|
142
|
+
- `--illustrationMaxHeight`
|
|
143
|
+
- `--illustrationMaxWidth`
|
|
144
|
+
- `--medium`
|
|
145
|
+
- `--sapFontBoldFamily`
|
|
146
|
+
- `--sapFontLargeSize`
|
|
147
|
+
- `--sapFontSize`
|
|
148
|
+
|
|
149
|
+
*...and 5 more*
|
|
150
|
+
|
|
151
|
+
## Examples
|
|
152
|
+
|
|
153
|
+
### Large
|
|
154
|
+
|
|
155
|
+
The default and largest size variant, ideal for full-page empty states, onboarding screens, or error pages where maximum visual impact is needed.
|
|
156
|
+
|
|
157
|
+
```html
|
|
158
|
+
<section role="region" aria-label="Illustrated message" aria-describedby="title-large" class="fd-illustrated-message-responsive-container">
|
|
159
|
+
<figure class="fd-illustrated-message">
|
|
160
|
+
<div class="fd-illustrated-message__container">
|
|
161
|
+
<svg class="fd-illustrated-message__illustration" role="img" aria-label="Illustration of a melting icecream" width="320" height="240" viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-Ice-Cream-Demo-Largev2">
|
|
162
|
+
<path d="M0 49C0 35.7452 10.7452 25 24 25H296C309.255 25 320 35.7452 320 49V139C320 152.255 309.255 163 296 163H24C10.7452 163 0 152.255 0 139V49Z" fill="var(--sapContent_Illustrative_Color20)"/><path d="M191.976 35.763L192.395 37.2842C192.289 37.2919 192.189 37.2995 192.082 37.3072C191.953 36.7873 191.831 36.2752 191.693 35.7783C191.876 35.763 191.968 35.7554 191.976 35.763Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
163
|
+
<path d="M207.132 8.78126C206.59 9.62947 206.522 10.7986 207.094 13.3356C207.643 15.7962 206.621 15.246 206.621 15.246C206.621 15.246 205.484 12.2811 204.301 10.1567C203.767 9.20154 203.057 9.1022 203.56 10.3325C204.247 11.9831 205.163 15.1772 205.415 16.2929C205.575 16.9883 205.789 17.8976 204.522 17.7524C203.049 17.5843 201.126 17.5385 199.218 17.5614C199.378 17.9588 199.523 18.379 199.668 18.8222C201.683 18.8757 203.034 19.0133 203.034 19.212C204.24 23.8198 201.614 23.8198 201.576 25.5315C201.569 25.9136 201.721 27.3808 201.767 27.6941C201.958 29.0314 201.004 28.6493 201.004 28.6493C199.836 24.4923 198.44 21.1376 197.333 18.7993C197.127 18.3714 196.936 17.974 196.761 17.6149C196.432 16.9577 196.15 16.4152 195.929 16.0025C195.349 14.9174 194.601 15.2078 195.044 16.1324C195.288 16.6444 195.517 17.1487 195.73 17.6607C194.296 17.7295 193.09 17.8212 192.372 17.9129C190.61 18.1269 190.777 19.0133 192.563 18.9292C193.8 18.8681 195.044 18.8299 196.219 18.807C197.241 21.321 197.989 23.7434 198.531 25.9136C197.936 25.8448 195.204 25.6844 191.449 25.8295C191.625 26.2345 191.8 26.6778 191.983 27.1592C194.097 27.1745 196.463 27.2662 198.905 27.4801C199.401 29.6962 199.676 31.5683 199.829 32.8903C199.958 34.0289 199.096 35.03 197.959 35.0682C197.196 35.0911 196.379 35.114 195.791 35.1369C195.326 35.1522 194.99 35.542 195.028 36.0004C195.227 38.2776 195.341 38.9119 195.417 39.7677C195.547 41.0897 194.547 40.7611 194.547 40.7611C193.136 35.0452 191.495 30.4603 190.121 27.1592C189.938 26.7236 189.762 26.311 189.595 25.9212C188.892 24.3242 188.297 23.1015 187.87 22.2915C187.236 21.0841 186.542 21.6573 187.107 22.7424C187.107 22.7424 187.687 23.9039 188.511 25.99C186.786 26.1276 184.947 26.3262 183.047 26.6166C181.246 26.8917 181.276 27.6329 183.047 27.503C183.069 27.4725 185.42 27.2432 188.969 27.1745C189.801 29.3676 190.793 32.2943 191.693 35.7788C190.777 35.8247 187.725 36.0692 183.527 36.5965C183.688 37.0473 183.863 37.5364 184.031 38.056C186.725 37.7351 189.442 37.4753 192.082 37.3071C192.8 40.2797 193.433 43.6038 193.845 47.18C193.914 47.7379 193.494 48.2346 192.937 48.2651C191.403 48.3492 188.595 48.5249 187.618 48.7236C186.664 48.9147 186.923 49.4037 187.015 50.4353C187.107 51.5204 187.236 52.2769 187.297 53.362C187.343 54.0727 187.229 54.7681 186.511 54.8369C186.427 54.8521 186.382 54.8521 186.382 54.8521C186.382 54.8521 184.504 45.9574 181.856 38.3235C181.688 37.8421 181.513 37.3606 181.345 36.8945C180.429 34.4263 179.444 32.1644 178.414 30.4909C177.704 29.3294 176.834 29.6656 177.529 30.7431C177.529 30.7431 178.536 33.0126 179.879 37.1008C177.071 37.5058 173.972 38.0255 170.775 38.6673C170.973 39.0647 171.172 39.4697 171.37 39.8976C174.14 39.4239 177.185 38.9424 180.337 38.5145C181.23 41.3419 182.23 44.8646 183.184 48.9834C182.467 49.0293 179.429 49.3502 175.102 49.9768C175.239 50.4582 175.369 50.932 175.491 51.4134C178.078 51.039 180.772 50.6951 183.512 50.42C183.993 52.6284 184.458 54.9897 184.886 57.4885C185.206 59.3683 185.382 61.2405 185.466 62.3103C185.504 62.8146 185.145 63.2578 184.642 63.3342C183.359 63.5176 180.971 63.8692 179.46 64.1213C178.918 64.213 178.452 64.7327 178.429 65.2828C178.353 67.5142 178.971 68.9431 178.017 69.1342C177.926 69.1495 177.682 69.1724 177.407 69.18V69.0501C177.407 69.0501 176.125 60.3923 173.66 51.6962C173.522 51.2148 173.385 50.7257 173.24 50.2443C172.156 46.6222 170.866 43.0842 169.378 40.2491C169.172 39.8441 168.959 39.4621 168.737 39.0876C168.585 38.8202 168.424 38.568 168.264 38.3158C167.531 37.162 166.684 37.4829 167.379 38.568C167.379 38.568 167.501 38.8202 167.715 39.3092C165.15 39.89 162.571 40.5395 160.083 41.2884C159.152 41.5711 158.663 41.915 158.824 42.0831C158.969 42.2359 159.617 42.2436 160.93 41.9456C162.67 41.5482 165.196 41.0209 168.203 40.4707C169.02 42.4346 170.309 45.881 171.584 50.5041C168.745 50.9549 165.555 51.5128 162.22 52.1852C162.38 52.6437 162.54 53.1404 162.701 53.6601C165.463 53.0946 168.6 52.5062 171.981 51.956C172.904 55.5169 173.797 59.6969 174.453 64.3811L171.569 64.9848C171.569 64.9848 166.883 61.5079 162.357 58.8334C161.915 57.1904 161.426 55.5704 160.892 54.0268C160.724 53.5301 160.556 53.0411 160.381 52.5673C159.335 49.7323 158.198 47.2259 157.099 45.4301C156.794 44.9181 156.45 44.6965 156.221 44.6965C155.924 44.6965 155.817 45.071 156.214 45.6823C156.214 45.6823 157.465 48.2651 158.984 52.8653C156.908 53.3238 154.809 53.8205 152.718 54.3631C147.185 52.3992 146.926 53.6524 149.109 54.2485C154.451 55.708 167.058 61.6837 174.926 70.3186C177.91 73.5968 179.07 77.815 171.584 86.8549L128.869 56.8542C128.869 56.8542 132.037 54.3784 134.578 52.4068C136.44 50.9626 137.936 50.5041 140.035 50.7563C140.325 50.5576 150.986 42.8473 163.853 33.5246C183.939 18.9827 209.422 0.520745 209.422 0.520745C209.544 0.429047 209.673 0.352632 209.795 0.283858C209.818 0.276216 209.841 0.268574 209.864 0.260933C211.131 -0.159352 211.993 1.4683 210.757 3.14944C209.956 4.24218 208.33 6.89379 207.132 8.78126Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
164
|
+
<path d="M159.457 54.3324C159.786 55.3869 160.121 56.5332 160.457 57.7558C159.847 57.4196 159.251 57.1216 158.687 56.8541C157.366 56.2351 156.183 55.7155 155.13 55.2799C156.336 55.0125 157.794 54.6839 159.457 54.3324Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
165
|
+
<path d="M158.686 56.854C157.366 56.235 156.183 55.7154 155.13 55.2798C156.335 55.0124 157.793 54.6838 159.457 54.3323C159.785 55.3868 160.121 56.533 160.457 57.7557C159.846 57.4195 159.251 57.1214 158.686 56.854Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
166
|
+
<path d="M213.527 3.63092C213.527 3.63092 185.626 78.8314 185.206 79.9776C186.03 82.4535 186.031 83.6073 184.405 87.4739C182.795 91.2871 181.566 93.8699 181.566 93.8699L171.584 86.855C179.07 77.815 177.91 73.5969 174.926 70.3187C167.058 61.6837 154.451 55.708 149.109 54.2485C146.926 53.6525 147.185 52.3993 152.718 54.3631C154.809 53.8206 156.908 53.3239 158.984 52.8654C157.465 48.2652 156.214 45.6823 156.214 45.6823C155.817 45.071 155.924 44.6966 156.221 44.6966C156.45 44.6966 156.794 44.9182 157.099 45.4302C158.198 47.2259 159.335 49.7324 160.38 52.5674C160.556 53.0411 160.724 53.5302 160.892 54.0269C161.426 55.5705 161.914 57.1905 162.357 58.8334C166.883 61.508 171.568 64.9849 171.568 64.9849L174.453 64.3812C173.797 59.6969 172.904 55.517 171.981 51.956C168.6 52.5062 165.463 53.0946 162.7 53.6601C162.54 53.1405 162.38 52.6438 162.22 52.1853C165.555 51.5128 168.745 50.955 171.584 50.5042C170.309 45.881 169.019 42.4347 168.203 40.4708C165.196 41.021 162.67 41.5483 160.93 41.9456C159.617 42.2436 158.969 42.236 158.824 42.0832C158.663 41.9151 159.152 41.5712 160.083 41.2884C162.571 40.5396 165.15 39.89 167.714 39.3093C167.501 38.8202 167.379 38.5681 167.379 38.5681C166.684 37.483 167.531 37.162 168.264 38.3159C168.424 38.5681 168.585 38.8202 168.737 39.0877C168.958 39.4621 169.172 39.8442 169.378 40.2492C170.866 43.0842 172.156 46.6222 173.24 50.2443C173.385 50.7258 173.522 51.2148 173.66 51.6962C176.125 60.3923 177.399 69.0502 177.399 69.0502V69.1801C177.681 69.1724 177.926 69.1495 178.017 69.1342C178.971 68.9432 178.353 67.5142 178.429 65.2829C178.452 64.7327 178.918 64.2131 179.46 64.1214C180.971 63.8692 183.359 63.5177 184.641 63.3343C185.145 63.2579 185.504 62.8147 185.466 62.3103C185.382 61.2405 185.206 59.3683 184.886 57.4885C184.458 54.9897 183.993 52.6285 183.512 50.4201C180.772 50.6952 178.078 51.0391 175.491 51.4135C175.369 50.9321 175.239 50.4583 175.102 49.9769C179.429 49.3503 182.466 49.0293 183.184 48.9835C182.23 44.8647 181.23 41.3419 180.337 38.5146C177.185 38.9425 174.14 39.4239 171.37 39.8977C171.172 39.4698 170.973 39.0648 170.775 38.6674C173.972 38.0255 177.071 37.5059 179.879 37.1009C178.536 33.0127 177.529 30.7431 177.529 30.7431C176.834 29.6657 177.704 29.3294 178.414 30.4909C179.444 32.1644 180.429 34.4263 181.345 36.8946C181.513 37.3607 181.688 37.8421 181.856 38.3235C184.504 45.9574 186.382 54.8522 186.382 54.8522C186.382 54.8522 186.427 54.8522 186.511 54.8369C187.229 54.7681 187.343 54.0728 187.297 53.3621C187.236 52.277 187.107 51.5205 187.015 50.4354C186.923 49.4038 186.664 48.9147 187.618 48.7237C188.595 48.525 191.403 48.3492 192.937 48.2652C193.494 48.2346 193.914 47.7379 193.845 47.1801C193.433 43.6038 192.8 40.2798 192.082 37.3072C189.442 37.4753 186.725 37.7351 184.031 38.0561C183.863 37.5364 183.688 37.0474 183.527 36.5965C187.725 36.0693 190.777 35.8247 191.693 35.7789C190.793 32.2944 189.801 29.3676 188.969 27.1745C185.42 27.2433 183.069 27.4725 183.047 27.5031C181.276 27.633 181.245 26.8918 183.047 26.6167C184.947 26.3263 186.786 26.1276 188.511 25.9901C187.686 23.9039 187.107 22.7424 187.107 22.7424C186.542 21.6573 187.236 21.0842 187.87 22.2916C188.297 23.1016 188.892 24.3242 189.594 25.9213C189.762 26.311 189.938 26.7237 190.121 27.1592C191.495 30.4604 193.136 35.0453 194.547 40.7612C194.547 40.7612 195.547 41.0898 195.417 39.7678C195.341 38.9119 195.227 38.2777 195.028 36.0005C194.99 35.542 195.326 35.1523 195.791 35.137C196.379 35.1141 197.196 35.0912 197.959 35.0682C199.096 35.03 199.958 34.029 199.829 32.8904C199.676 31.5684 199.401 29.6962 198.905 27.4802C196.463 27.2662 194.097 27.1745 191.983 27.1592C191.8 26.6778 191.624 26.2346 191.449 25.8296C195.204 25.6844 197.936 25.8449 198.531 25.9137C197.989 23.7435 197.241 21.3211 196.219 18.807C195.043 18.8299 193.799 18.8682 192.563 18.9293C190.777 19.0133 190.609 18.1269 192.372 17.913C193.09 17.8213 194.296 17.7296 195.73 17.6608C195.517 17.1488 195.288 16.6445 195.043 16.1325C194.601 15.2079 195.349 14.9175 195.929 16.0026C196.15 16.4152 196.432 16.9578 196.761 17.6149C196.936 17.9741 197.127 18.3715 197.333 18.7994C198.44 21.1377 199.836 24.4923 201.004 28.6493C201.004 28.6493 201.958 29.0314 201.767 27.6941C201.721 27.3808 201.569 25.9137 201.576 25.5316C201.614 23.8199 204.24 23.8199 203.034 19.212C203.034 19.0133 201.683 18.8758 199.668 18.8223C199.523 18.3791 199.378 17.9588 199.218 17.5615C201.126 17.5385 203.049 17.5844 204.522 17.7525C205.789 17.8977 205.575 16.9883 205.415 16.293C205.163 15.1773 204.247 11.9831 203.56 10.3326C203.057 9.10226 203.766 9.2016 204.301 10.1568C205.484 12.2811 206.621 15.2461 206.621 15.2461C206.621 15.2461 207.643 15.7963 207.094 13.3357C206.521 10.7987 206.59 9.62953 207.132 8.78132C208.33 6.89386 209.956 4.24224 210.757 3.1495C211.993 1.46836 211.131 -0.15929 209.864 0.260995C211.94 -0.740047 214.382 1.30025 213.527 3.63092Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
167
|
+
<path d="M69.9987 108.978C74.2979 108.978 77.783 107.873 77.783 106.51C77.783 105.146 74.2979 104.041 69.9987 104.041C65.6996 104.041 62.2144 105.146 62.2144 106.51C62.2144 107.873 65.6996 108.978 69.9987 108.978Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
168
|
+
<path d="M101.975 119.033C101.975 115.426 94.7016 112.499 85.7268 112.499C76.7519 112.499 69.4789 115.426 69.4789 119.033C69.4789 122.64 76.7519 125.566 85.7268 125.566C94.7016 125.566 101.975 122.64 101.975 119.033Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
169
|
+
<path d="M241.275 96.6741C234.735 97.2014 213.847 99.043 197.981 100.449C184.732 95.1305 163.257 92.6852 139.019 92.6852C98.7924 92.6852 111.354 100.105 111.354 115.556C111.354 126.224 75.7906 138.794 98.6627 143.509C104.768 144.77 131.402 147.07 130.136 140.965C131.402 141.217 136.737 142.233 140.538 142.233C179.833 142.233 210.421 130.847 211.817 115.923C224.661 109.734 245.572 99.6772 247.343 98.9895C251.197 97.4918 247.984 96.1392 241.275 96.6818V96.6741Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
170
|
+
<path d="M187.739 118.093C187.739 120.05 187.266 122.227 186.297 124.413C188.487 113.302 178.978 109.833 174.376 109.199C171.064 108.924 181.183 107.831 182.969 97.4383C182.74 100.961 181.977 104.354 180.771 107.571C184.923 109.588 187.739 113.539 187.739 118.093Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
171
|
+
<path d="M174.375 109.198C178.977 109.832 188.486 113.301 186.296 124.412C184.029 129.585 179.046 134.789 171.246 137.235C160.188 140.704 147.626 141.972 136.461 141.544V141.445C141.04 141.636 145.077 141.071 146.627 140.459C153.732 137.663 149.488 130.51 143.581 130.036C127.593 128.768 122.48 126.338 126.456 126.483C133.561 126.735 142.948 125.719 148.153 122.288C153.358 118.857 152.48 111.865 146.886 111.742C139.354 111.574 137.491 113.095 141.719 109.71C161.913 93.5402 152.93 57.816 133.317 55.4853C140.605 55.898 149.778 58.3738 156.777 62.3551C169.3 69.477 180.809 82.5211 182.801 91.0796C183.106 92.4016 183.045 93.8 183.045 95.1908C183.045 95.9473 183.022 96.6962 182.969 97.4374C181.183 107.83 171.063 108.923 174.375 109.198Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
172
|
+
<path d="M146.885 111.743C152.479 111.866 153.357 118.858 148.152 122.289C142.947 125.72 133.56 126.736 126.455 126.484C122.479 126.339 127.592 128.769 143.581 130.037C149.488 130.511 153.731 137.664 146.626 140.46C145.077 141.072 141.039 141.637 136.46 141.446C132.133 141.27 127.325 140.414 123.662 138.298C120.365 136.387 113.634 132.2 109.956 131.306C106.323 130.435 104.377 131.306 106.277 132.322C111.825 135.287 105.552 141.95 95.4098 142.195C86.786 141.224 82.5047 138.55 82.5047 134.783C82.5047 132.59 84.6644 131.138 87.8392 130.267C83.6647 129.181 81.8255 127.057 81.8255 123.771C81.8255 123.412 81.8713 123.068 81.94 122.724H81.9018C82.7641 120.126 84.7942 119.545 86.0992 119.125C86.5037 118.995 86.5037 118.437 86.0992 118.292C84.0539 117.52 82.6649 116.061 82.6649 116.061C82.6649 120.806 78.9483 122.197 76.0178 122.564C68.5998 121.563 67.9511 118.178 67.9511 115.472C67.9511 110.215 73.1559 108.053 79.2001 107.082C80.5357 100.625 84.0844 96.5673 89.4189 95.3599C89.3808 97.2627 89.4571 99.4252 89.77 101.58C89.77 101.58 95.1045 101.58 96.7529 106.662C96.7529 106.662 94.3185 110.414 93.3492 112.935C93.2348 113.226 93.5324 113.516 93.8148 113.386C95.5777 112.569 100.279 111.04 105.758 114.54C105.758 114.54 107.918 104.881 115.275 106.028C114.138 110.475 120.098 115.931 129.615 109.329C132.126 107.586 128.737 109.084 124.67 109.199C120.358 109.329 113.978 106.555 116.42 99.8837C117.351 97.3391 119.297 95.8184 120.434 94.2519C122.151 91.8907 122.479 89.8045 120.358 87.4738C117.687 84.5548 117.946 81.1619 117.687 79.5572L89.9379 89.239C92.8685 71.9921 108.307 57.817 128.18 55.5857C129.722 55.4099 131.454 55.387 133.309 55.4863C152.922 57.817 161.904 93.5412 141.711 109.711C137.483 113.096 139.345 111.575 146.878 111.743H146.885ZM104.926 129.976C105.117 130.022 105.3 130.075 105.484 130.121C105.468 130.022 105.445 129.915 105.438 129.816C105.27 129.869 105.102 129.923 104.926 129.976Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
173
|
+
<path d="M136.462 141.447V141.546C126.159 141.156 117.047 139.307 111.399 136.396C110.98 140.018 107.232 143.135 97.5632 142.402C96.8153 142.348 96.0979 142.28 95.411 142.196C105.553 141.951 111.827 135.288 106.278 132.323C104.378 131.306 106.324 130.435 109.957 131.306C113.635 132.2 120.367 136.388 123.663 138.298C127.327 140.415 132.135 141.271 136.462 141.447Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
174
|
+
<path d="M124.679 109.198C128.747 109.083 132.136 107.586 129.625 109.328C120.108 115.93 114.148 110.474 115.285 106.027C107.928 104.88 105.768 114.539 105.768 114.539C100.289 111.04 95.5876 112.568 93.8247 113.386C93.5423 113.515 93.2447 113.225 93.3591 112.935C94.3284 110.413 96.7628 106.661 96.7628 106.661C95.1144 101.579 89.7799 101.579 89.7799 101.579C89.467 99.4244 89.3907 97.2619 89.4288 95.3591C89.4288 95.3515 89.4441 95.3515 89.4517 95.3515C89.4517 95.298 89.4517 95.2445 89.4517 95.191C89.4517 94.8777 89.4518 94.572 89.467 94.2664C89.467 94.2052 89.467 94.1441 89.4747 94.083C89.5204 92.9902 89.5968 92.0274 89.6731 91.248C89.6807 91.1715 89.6883 91.0951 89.6959 91.0264C89.7646 90.4227 89.8562 89.8343 89.9555 89.2382L117.704 79.5564C117.964 81.1611 117.704 84.554 120.375 87.473C122.497 89.8037 122.169 91.8899 120.452 94.2511C119.314 95.8176 117.368 97.3383 116.437 99.8829C113.995 106.554 120.375 109.328 124.687 109.198H124.679Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
175
|
+
<path d="M89.4674 94.0842C89.4903 93.129 89.5591 92.1815 89.6661 91.2492C89.5897 92.0286 89.5133 92.9915 89.4674 94.0842Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
176
|
+
<path d="M86.1074 118.293C86.5042 118.438 86.5042 118.996 86.1074 119.126C84.8023 119.546 82.7723 120.127 81.91 122.725C81.0934 122.824 80.2692 122.862 79.4679 122.839C78.1857 122.801 77.0486 122.71 76.0336 122.564C78.9642 122.198 82.6808 120.807 82.6808 116.061C82.6808 116.061 84.0697 117.521 86.115 118.293H86.1074Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
177
|
+
<path d="M71.0204 104.774C71.0204 106.47 70.4099 107.594 66.014 107.594C61.6182 107.594 61 106.47 61 104.774C61 103.078 63.2438 101.702 66.014 101.702C68.7843 101.702 71.0204 103.078 71.0204 104.774Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
178
|
+
<path d="M117.78 79.7266C118.375 81.9426 115.262 83.8072 114.231 85.7405C113.552 87.009 112.965 88.7054 112.369 90.3942C110.843 91.0743 108.393 90.654 104.753 95.1396C104.417 95.5522 104.142 95.9496 103.906 96.3164C102.105 95.6057 100.136 93.8405 97.6479 87.4751C95.8926 82.9819 90.4208 81.3772 89.566 86.0691C88.8868 89.8287 93.4887 98.3949 101.563 99.4571C101.22 99.6939 100.8 99.8926 100.273 100.053C99.9755 100.145 99.6551 100.206 99.304 100.244V100.183C95.9995 100.053 92.382 97.0652 91.306 95.7356C84.3459 87.1236 87.9939 77.5869 91.4357 79.2146C98.4111 82.5234 103.616 78.5804 107.165 74.5151C109.92 71.3667 112.591 71.4202 114.773 73.6592C116.033 75.1417 117.086 77.1208 117.78 79.7266ZM114.781 78.5804C115.575 77.7856 115.178 76.0128 114.018 74.8971C112.369 73.3077 110.912 73.3077 110.4 74.133C109.904 74.943 110.927 76.3643 111.988 77.564C113.003 78.7103 114.27 79.0923 114.781 78.5804Z" fill="var(--sapContent_Illustrative_Color23)"/>
|
|
179
|
+
<path d="M114.017 74.8962C115.177 76.0119 115.574 77.7847 114.78 78.5794C114.269 79.0914 113.002 78.7093 111.987 77.5631C110.926 76.3634 109.903 74.9421 110.399 74.1321C110.911 73.3068 112.368 73.3068 114.017 74.8962Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
180
|
+
<path d="M114.772 73.6589C112.59 71.4199 109.919 71.3664 107.164 74.5147C103.615 78.58 98.4101 82.5231 91.4348 79.2143C87.9929 77.5866 84.3449 87.1233 91.305 95.7353C92.3811 97.0649 95.9985 100.053 99.2954 100.183V100.244C95.5101 100.618 89.0613 97.4546 86.7871 89.324C84.0321 79.4741 88.26 71.3359 99.7609 71.2518C103.378 69.4102 110.369 68.4856 114.772 73.6589ZM103.615 75.9131C105.767 73.3074 107.377 71.7409 105.767 71.7179C100.57 71.6568 97.9675 75.4699 98.7917 77.1205C99.8983 79.3366 101.982 77.877 103.615 75.9131Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
181
|
+
<path d="M105.767 71.7176C107.377 71.7405 105.767 73.3071 103.615 75.9128C101.981 77.8767 99.8981 79.3362 98.7915 77.1202C97.9673 75.4696 100.57 71.6565 105.767 71.7176Z" fill="var(--sapContent_Illustrative_Color23)"/>
|
|
182
|
+
<path d="M103.905 96.3153C103.004 97.6908 102.615 98.7377 101.562 99.456C93.4874 98.3938 88.8855 89.8276 89.5647 86.068C90.4195 81.3761 95.8913 82.9808 97.6466 87.474C100.135 93.8394 102.103 95.6046 103.905 96.3153Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
183
|
+
<path d="M98.701 76.9295C98.701 76.9295 97.5258 66.4453 83.7583 56.2209C82.3312 55.1588 84.1399 52.5377 85.6586 53.7451C87.1849 54.9524 99.1742 66.2314 100.632 78.1751C99.7466 78.3661 98.9529 78.2057 98.6934 76.9372L98.701 76.9295Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
184
|
+
</svg>
|
|
185
|
+
|
|
186
|
+
<figcaption class="fd-illustrated-message__figcaption">
|
|
187
|
+
<h2 class="fd-illustrated-message__title" id="title-large">Delivery Delay</h2>
|
|
188
|
+
<p class="fd-illustrated-message__text">A broken cooling system resulted in melted ice cream in transit. Another delivery is already on the way.</p>
|
|
189
|
+
</figcaption>
|
|
190
|
+
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="fd-illustrated-message__actions">
|
|
194
|
+
<button type="button" class="fd-button">Check Delivery Schedule</button>
|
|
195
|
+
</div>
|
|
196
|
+
</figure>
|
|
197
|
+
</section>
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
### Medium
|
|
201
|
+
|
|
202
|
+
A balanced size variant suitable for dialogs, panels, or section-level empty states. Apply the <code>.fd-illustrated-message--medium</code> modifier class.
|
|
203
|
+
|
|
204
|
+
```html
|
|
205
|
+
<section role="region" aria-label="Illustrated message" aria-describedby="title-medium">
|
|
206
|
+
<figure class="fd-illustrated-message fd-illustrated-message--medium">
|
|
207
|
+
<div class="fd-illustrated-message__container">
|
|
208
|
+
<svg class="fd-illustrated-message__illustration" role="img" aria-label="Illustration of a folder with a question mark" width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-UnknownFolder-Demo-Medium">
|
|
209
|
+
<rect y="50.5363" width="160" height="69" rx="12" fill="var(--sapContent_Illustrative_Color20)"/>
|
|
210
|
+
<path d="M86.1479 98.1281C84.7323 97.5522 83.2495 97.2259 81.7955 97.3075L64.261 98.1713L61.9864 97.3555C60.8443 96.866 58.7616 96.7461 57.3364 96.794L38.6118 97.5858C36.7403 97.677 36.4044 98.0417 37.4313 98.5504L39.6291 99.4525L31.2362 99.9228C29.4654 100.024 28.8176 100.479 29.0432 100.907C29.2015 101.204 29.763 101.425 30.8763 101.732L55.1386 109.765C57.9123 110.701 58.6129 111.435 64.6593 110.701L104.834 106.176C106.365 105.955 106.36 105.264 104.853 104.645L86.1719 98.0945L86.1527 98.1329L86.1479 98.1281Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
211
|
+
<path d="M46.6511 64.0503C43.2845 65.174 42.2731 67.9272 43.4811 70.6149C45.3494 74.7727 57.1909 100.015 58.3989 102.094C59.8083 104.515 63.6618 105.395 63.6618 105.395L46.6511 64.0503Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
212
|
+
<path d="M52.3072 56.3995C52.3072 56.3995 48.6971 57.1767 49.7085 60.0844C50.7199 62.9921 50.9259 63.6055 50.9259 63.6055L52.3072 63.2263V56.4042V56.3995Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
213
|
+
<path d="M74.3514 56.3336L73.2277 53.1543C72.8859 51.5577 71.4109 50.6212 69.936 51.0567L52.4617 56.2868C50.9774 56.7316 50.0128 58.0895 50.5232 59.7751L51.4924 62.5798L46.7586 63.9985C45.457 64.3872 44.4784 65.4173 44.0429 66.6721C43.6683 67.7491 43.7901 68.9384 44.2677 69.9778L58.6236 100.619C59.2136 101.902 59.4992 102.585 60.6978 103.512L63.3152 105.156C63.9614 105.559 64.7153 105.751 65.4785 105.704L66.1106 105.582L114.746 89.9104C116.726 89.3017 116.459 84.4555 116.103 82.3625L104.075 50.4807C103.33 48.1115 101.645 48.1256 99.5422 48.7577L74.342 55.06V56.3336H74.3514Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
214
|
+
<path d="M60.4778 103.433L63.0952 105.076C63.7414 105.479 64.7246 105.755 65.4832 105.709L66.1012 105.507L114.755 89.9152C116.736 89.3065 116.469 84.4603 116.113 83.6316L104.309 51.099L47.5828 69.374C45.8644 69.8516 45.0028 71.481 45.7333 73.1058L58.6236 100.628C59.2136 101.911 59.2744 102.511 60.4731 103.433H60.4778Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
215
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M101.059 39L102.211 44.7873L101.176 44.9933L100.024 39.206L101.059 39Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
216
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M107.422 39.9414L104.908 45.2839L103.953 44.8391L106.467 39.4966L107.422 39.9414Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
217
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.796 45.1717L106.416 47.6345L105.976 46.6747L111.356 44.2118L111.796 45.1717Z" fill="var(--sapContent_Illustrative_Color22)"/>
|
|
218
|
+
<path d="M86.6565 55.8789L86.5207 51.8475C86.1976 50.3398 84.5588 49.2628 82.8778 49.8294L65.8952 54.8816C64.4483 55.317 63.7647 56.5251 63.938 58.3933L64.3547 62.2375L59.3165 63.7264C57.2329 64.3492 56.0389 66.3157 56.5118 68.8535L61.8075 102.678C62.0838 104.551 64.3875 106.181 66.3634 105.567L113.575 90.8135C115.485 90.2189 117.391 88.3413 117.335 85.265L115.059 51.4588C114.685 49.3237 112.742 48.0642 110.723 48.6682L86.6658 55.8789H86.6611H86.6565Z" fill="var(--sapContent_Illustrative_Color26)"/>
|
|
219
|
+
<path d="M87.0357 55.8185L86.5862 52.0867C86.2678 50.6024 84.8725 49.7362 83.4631 50.1623L66.7473 55.1395C65.3239 55.5656 64.7574 56.6004 64.8182 58.5904L65.1132 62.3971L60.5667 63.755C58.5159 64.3683 57.4389 66.2694 57.8276 68.662L62.6316 102.295C63.1279 104.201 65.0992 105.245 67.0423 104.636L114.554 89.7932C116.431 89.2079 117.363 87.5878 117.34 85.2701L114.998 51.4593C114.628 49.3616 112.718 48.1255 110.733 48.7201L87.0451 55.8232H87.0404L87.0357 55.8185Z" fill="var(--sapContent_Illustrative_Color27)"/>
|
|
220
|
+
<path d="M91.1226 69.8343C90.2866 69.695 89.3311 69.7646 88.291 70.0433C86.9622 70.3967 85.8475 70.9839 84.9716 71.7951C84.0957 72.6013 83.4587 73.5617 83.0656 74.6417L82.9959 74.8357L85.1259 75.418L85.2204 75.209C85.5837 74.3928 86.0266 73.721 86.5342 73.2084C87.0319 72.7108 87.7037 72.3475 88.5348 72.1285C89.0573 71.9892 89.55 71.9543 90.0079 72.029C90.4558 72.0986 90.824 72.2778 91.1077 72.5664C91.3914 72.8501 91.5606 73.2383 91.6103 73.716C91.6501 74.1241 91.6153 74.5023 91.5058 74.8308C91.3914 75.1642 91.2321 75.4777 91.0231 75.7514C90.8091 76.0351 90.5205 76.3685 90.1671 76.7368C90.1671 76.7368 90.1522 76.7517 90.1422 76.7617C90.0775 76.8214 89.9979 76.906 89.8984 77.0155C89.4107 77.5281 89.0126 77.9759 88.7239 78.3591C88.4204 78.7523 88.1765 79.2201 87.9924 79.7426C87.8082 80.2701 87.7386 80.8673 87.7933 81.5093L87.8132 81.7183L90.1671 81.0913L90.1522 80.8922C90.1174 80.514 90.1671 80.1607 90.2915 79.8422C90.4209 79.5137 90.5852 79.2201 90.7792 78.9713C90.9883 78.7075 91.2968 78.3492 91.6999 77.9212C92.2324 77.3788 92.6703 76.8861 93.0087 76.4631C93.3571 76.0202 93.6408 75.5026 93.8547 74.9203C94.0687 74.3331 94.1434 73.6812 94.0737 72.9845C93.9891 72.1185 93.6905 71.4069 93.1779 70.8694C92.6653 70.327 91.9736 69.9836 91.1326 69.8443L91.1226 69.8343Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
221
|
+
<path d="M89.3681 82.6705C88.9053 82.795 88.537 83.0338 88.2683 83.3872C87.9995 83.7405 87.8851 84.1237 87.9299 84.5318C87.9747 84.9398 88.1638 85.2633 88.4922 85.4524C88.8207 85.6415 89.2138 85.6813 89.6766 85.5569C90.1395 85.4325 90.4928 85.1986 90.7566 84.8503C91.0203 84.5019 91.1348 84.1137 91.09 83.6907C91.0452 83.2677 90.866 82.9791 90.5426 82.785C90.2191 82.5909 89.8259 82.5511 89.3731 82.6705H89.3681Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
222
|
+
<path d="M87.5718 65.0677C79.8781 67.0981 74.3541 74.5679 75.2499 81.5699C76.1258 88.4176 82.8441 92.2794 90.2343 90.3137C97.6195 88.348 103.158 81.2365 102.581 74.3191C102.004 67.4017 95.2556 63.0372 87.5718 65.0677ZM90.0153 88.2136C83.8792 89.8459 77.9522 86.7754 77.6088 80.9428C76.8922 75.1551 81.4606 68.9991 87.8057 67.322C94.1459 65.6449 100.267 69.2231 100.227 74.9411C100.73 80.6691 96.1415 86.5813 90.0104 88.2136H90.0153Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
223
|
+
</svg>
|
|
224
|
+
|
|
225
|
+
<figcaption class="fd-illustrated-message__figcaption">
|
|
226
|
+
<h2 class="fd-illustrated-message__title" id="title-medium">Unknown File Format</h2>
|
|
227
|
+
<p class="fd-illustrated-message__text">We found some files that have an unknown file format. Let's take a look and fix the issue.</p>
|
|
228
|
+
</figcaption>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="fd-illustrated-message__actions">
|
|
231
|
+
<button type="button" class="fd-button" aria-label="Add support for unknown file format">Add File Format</button>
|
|
232
|
+
</div>
|
|
233
|
+
</figure>
|
|
234
|
+
</section>
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### Extra Small
|
|
238
|
+
|
|
239
|
+
A compact size designed for narrow panels, sidebars, or smaller dialog windows. Apply the <code>.fd-illustrated-message--small</code> modifier class.
|
|
240
|
+
|
|
241
|
+
```html
|
|
242
|
+
<section role="region" aria-label="Illustrated messag" aria-describedby="title-small">
|
|
243
|
+
<figure class="fd-illustrated-message fd-illustrated-message--small">
|
|
244
|
+
<div class="fd-illustrated-message__container">
|
|
245
|
+
<svg class="fd-illustrated-message__illustration" role="img" aria-label="Illustration of a smartphone displaying an email icon" width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-Phone-with-Icon-Demo-Small">
|
|
246
|
+
<rect y="41" width="128" height="55" rx="8" fill="var(--sapContent_Illustrative_Color20)"/>
|
|
247
|
+
<path d="M54.2425 64.6014L32.6261 68.271C29.8392 68.7392 28.8507 69.9597 31.7527 71.3723L63.8418 87.1231C64.9018 87.6433 66.0134 88.0595 67.1527 88.3636L68.435 88.7038C68.5621 88.7358 68.6931 88.7318 68.8161 88.6918L94.2238 80.4482C94.8431 80.2481 94.859 79.3718 94.2477 79.1477L54.5799 64.6294C54.4727 64.5894 54.3576 64.5774 54.2425 64.5974V64.6014Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
248
|
+
<path d="M96.1175 79.8359L72.6432 88.5917C69.9436 89.6001 66.9106 88.6957 65.1876 86.3747L36.2665 47.482C35.151 45.9813 35.7901 43.8164 37.5409 43.1761L60.0307 36.2251C62.7977 35.2127 65.8982 36.1451 67.6609 38.5181L97.2847 75.8542C98.3129 77.2388 97.7293 79.2316 96.1215 79.8319L96.1175 79.8359Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
249
|
+
<path d="M97.7928 77.687L97.9992 74.8258L35.9648 42.6639L35.7107 46.1334L66.9621 87.3512L97.7968 77.687H97.7928Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
250
|
+
<path d="M96.3239 77.1909L72.8496 85.9467C70.15 86.9551 67.117 86.0508 65.394 83.7298L36.4729 44.841C35.3574 43.3403 35.9966 41.1754 37.7473 40.5351L60.2331 33.5841C63.0002 32.5717 65.2352 32.6077 67.8633 35.8771L97.4871 73.2132C98.5153 74.5978 97.9318 76.5867 96.3239 77.1909Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
251
|
+
<path d="M95.2957 76.7748L72.6749 84.9984C69.7451 85.9708 67.645 84.6502 66.5294 83.1816L37.5051 44.9091C36.4729 43.4605 36.5801 41.9158 38.2912 41.2675L60.9914 34.1765C62.8691 33.4762 65.2154 34.0444 66.4223 35.6611L96.4232 72.9012C97.8246 74.6779 96.8757 76.1946 95.2997 76.7668H95.2957V76.7748Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
252
|
+
<path d="M78.344 85.5346C78.4552 85.2184 78.344 84.8903 78.09 84.7982C77.8399 84.7102 77.5461 84.8943 77.4349 85.2104C77.3238 85.5266 77.4349 85.8547 77.689 85.9467C77.9391 86.0348 78.2329 85.8507 78.344 85.5346Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
253
|
+
<path d="M79.813 85.0064C79.9241 84.6902 79.813 84.3621 79.5589 84.27C79.3088 84.182 79.015 84.3661 78.9039 84.6822C78.7927 84.9984 78.9039 85.3265 79.1579 85.4185C79.408 85.5066 79.7018 85.3225 79.813 85.0064Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
254
|
+
<path d="M81.2937 84.4741C81.4048 84.158 81.2937 83.8299 81.0396 83.7378C80.7895 83.6498 80.4957 83.8339 80.3846 84.15C80.2734 84.4661 80.3846 84.7943 80.6386 84.8863C80.8888 84.9743 81.1825 84.7903 81.2937 84.4741Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
255
|
+
<path d="M85.7639 83.0014L82.9929 84.0738C82.6832 84.1939 82.3497 83.9778 82.3259 83.6457V83.5736C82.3021 83.3495 82.4371 83.1455 82.6475 83.0694L85.4225 82.069C85.744 81.9529 86.0815 82.193 86.0815 82.5372C86.0815 82.7413 85.9544 82.9254 85.7639 83.0014Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
256
|
+
<path d="M88.0466 81.985C88.1578 81.6689 88.0466 81.3407 87.7925 81.2487C87.5424 81.1606 87.2487 81.3447 87.1375 81.6609C87.0263 81.977 87.1375 82.3051 87.3916 82.3972C87.6417 82.4852 87.9355 82.3011 88.0466 81.985Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
257
|
+
<path d="M89.5155 81.4567C89.6266 81.1405 89.5155 80.8124 89.2614 80.7204C89.0113 80.6323 88.7175 80.8164 88.6064 81.1325C88.4952 81.4487 88.6064 81.7768 88.8604 81.8689C89.1106 81.9569 89.4043 81.7728 89.5155 81.4567Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
258
|
+
<path d="M56.7634 38.8104L48.3511 41.5436C47.3626 41.9078 46.2549 41.6317 45.5483 40.8433L43.9047 39.0105L56.2036 35.3129L57.5415 36.8056C58.2442 37.5899 58.137 38.5063 56.7634 38.8104Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
259
|
+
<path d="M52.6863 38.6943L49.3753 39.7027C49.0776 39.7947 48.7481 39.6827 48.5496 39.4266C48.4067 39.2465 48.4781 38.9904 48.6885 38.9264L52.0908 37.8939C52.3528 37.8139 52.6466 37.9059 52.8331 38.126C53.0039 38.3261 52.9284 38.6222 52.6863 38.6983V38.6943Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
260
|
+
<path d="M54.1869 38.2499C54.5084 38.2699 54.7704 38.0739 54.7704 37.8057C54.7704 37.5376 54.5084 37.3055 54.1869 37.2855C53.8653 37.2655 53.6033 37.4616 53.6033 37.7297C53.6033 37.9978 53.8653 38.2299 54.1869 38.2499Z" fill="var(--sapContent_Illustrative_Color30)"/>
|
|
261
|
+
<path d="M78.2652 63.2579L66.4159 67.7068C64.595 68.3909 62.2923 67.8358 61.3246 66.4805L56.3953 59.5706C55.7238 58.6283 55.9213 57.514 56.8851 56.7481L62.237 52.48C62.4147 52.3423 62.6596 52.2606 62.9322 52.252L70.9779 52.0024C72.3761 51.9594 73.7111 52.4972 74.4063 53.3749L79.5015 59.8073C80.5008 61.0679 79.9518 62.6211 78.2652 63.2579ZM59.0337 59.9707L63.2245 65.7792C63.6392 66.3558 64.6187 66.5924 65.3968 66.3041L77.2264 61.9198C77.9532 61.653 78.1941 60.9862 77.7676 60.444L73.4544 54.9454L70.0734 59.3813C69.4098 60.259 68.0511 60.7452 66.6015 60.6161L59.0377 59.9664L59.0337 59.9707ZM58.1055 58.4003L66.7556 59.1576C67.3678 59.2135 67.9563 59.0027 68.2446 58.6327L72.1668 53.5771C71.8863 53.4438 71.5466 53.362 71.203 53.3792L63.5365 53.6288L58.4847 57.7162C58.2477 57.9098 58.1213 58.1594 58.1134 58.4089L58.1055 58.4003Z" fill="var(--sapContent_Illustrative_Color13)"/>
|
|
262
|
+
</svg>
|
|
263
|
+
|
|
264
|
+
<figcaption class="fd-illustrated-message__figcaption">
|
|
265
|
+
<h2 class="fd-illustrated-message__title" id="title-small">All Caught Up</h2>
|
|
266
|
+
<p class="fd-illustrated-message__text">You've read all of the messages in your inbox! Check back later.</p>
|
|
267
|
+
</figcaption>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="fd-illustrated-message__actions">
|
|
270
|
+
<button type="button" class="fd-button" aria-label="Add support for unknown file format">Add File Format</button>
|
|
271
|
+
</div>
|
|
272
|
+
</figure>
|
|
273
|
+
</section>
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
### Extra Small
|
|
277
|
+
|
|
278
|
+
The most compact illustrated version featuring a minimal icon and condensed spacing, ideal for inline messages, mobile interfaces, or narrow cards. Apply the <code>.fd-illustrated-message--xsmall</code> modifier class.
|
|
279
|
+
|
|
280
|
+
```html
|
|
281
|
+
<section role="region" aria-label="Illustrated message" aria-describedby="title-xsmall">
|
|
282
|
+
<figure class="fd-illustrated-message fd-illustrated-message--xsmall">
|
|
283
|
+
<div class="fd-illustrated-message__container">
|
|
284
|
+
<svg role="img" aria-label="Illustration of a melting icecream" class="fd-illustrated-message__illustration" width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-Ice-Cream-Demo-ExtraSmall">
|
|
285
|
+
<path d="M27.1215 21.502C27.1215 21.502 27.2422 21.502 27.269 21.502C27.4969 21.4617 27.3495 21.1131 27.3629 20.5902C27.3629 20.4561 27.4835 20.3354 27.6042 20.3086C27.9663 20.2415 28.5295 20.1611 28.8379 20.1208C28.9586 20.1074 29.039 20.0002 29.039 19.8795C29.0256 19.6247 28.972 19.1822 28.9049 18.7263C28.7976 18.1363 28.6904 17.5732 28.5697 17.0368H28.677L28.5294 16.6882C28.5294 16.6882 28.5295 16.6882 28.4892 16.6882C28.2613 15.7093 28.0199 14.8646 27.8054 14.1941C27.9261 14.1807 28.0468 14.1673 28.1674 14.1405C28.7977 15.9641 29.2536 18.0827 29.2536 18.0827C29.2536 18.0827 29.2535 18.0827 29.2803 18.0827C29.4546 18.0693 29.4815 17.895 29.4681 17.7341C29.4547 17.4793 29.4279 17.2916 29.401 17.0368C29.3742 16.7954 29.3206 16.6748 29.5485 16.6211C29.7765 16.5675 30.4469 16.5273 30.8224 16.5139C30.9565 16.5139 31.0504 16.3798 31.037 16.2591C30.9431 15.4009 30.7822 14.6098 30.6079 13.9125H30.6883L30.5945 13.5371C30.5945 13.5371 30.5676 13.5371 30.5274 13.5371C30.3129 12.7057 30.0715 12.0085 29.8837 11.4855C29.9776 11.4855 30.0581 11.4855 30.1654 11.4855C30.4872 12.2767 30.8894 13.3628 31.2246 14.7305C31.2246 14.7305 31.466 14.8109 31.4258 14.4891C31.4124 14.288 31.3856 14.1405 31.3319 13.5907C31.3319 13.4835 31.399 13.3896 31.5197 13.3896C31.6538 13.3896 31.8549 13.3896 32.0426 13.3762C32.3108 13.3762 32.5253 13.1348 32.4851 12.8532C32.4448 12.5448 32.3778 12.0889 32.2706 11.566H32.3376L32.2035 11.2039C32.2035 11.2039 32.2035 11.2039 32.1767 11.2039C32.0426 10.681 31.8682 10.1044 31.6269 9.51443C31.7207 9.51443 31.8012 9.51443 31.8951 9.51443C32.1632 10.0776 32.4851 10.8687 32.7667 11.861C32.7667 11.861 32.9947 11.9548 32.9544 11.633C32.9544 11.5526 32.9008 11.2039 32.9142 11.1235C32.9142 10.7078 33.5444 10.7078 33.2628 9.6217C33.2628 9.58147 32.941 9.54124 32.4583 9.52784C32.4181 9.42056 32.3912 9.3267 32.351 9.21943C32.8069 9.21943 33.2628 9.21943 33.6114 9.25966C33.9199 9.29988 33.8662 9.07193 33.826 8.91103C33.7723 8.64285 33.5444 7.87854 33.3835 7.48969C33.2628 7.19469 33.4371 7.22151 33.5578 7.44946C33.8393 7.959 34.1076 8.65626 34.1076 8.65626C34.1076 8.65626 34.349 8.79035 34.2149 8.20036C34.0808 7.59696 34.0942 7.31537 34.2149 7.11424C34.4965 6.65834 34.8852 6.02812 35.073 5.77335C35.368 5.37108 35.1669 4.98223 34.8585 5.0895C35.3546 4.84814 35.9446 5.33086 35.7301 5.89403C35.7301 5.89403 29.0658 23.8217 28.9719 24.0899C29.1731 24.6799 29.1731 24.9615 28.7842 25.8733C28.3953 26.7851 28.1004 27.4019 28.1004 27.4019L25.7136 25.7258C27.497 23.5669 27.2288 22.5613 26.5048 21.7835C24.6275 19.7186 21.6239 18.2972 20.3501 17.9486C19.8271 17.8145 19.8942 17.5061 21.2082 17.9754C21.2082 17.9754 21.2082 17.9754 21.1948 17.9754C21.3557 18.0827 21.3557 18.0961 21.7445 18.2034C21.758 18.2034 21.7714 18.2034 21.7982 18.2034C22.053 18.3106 22.3346 18.4313 22.643 18.5788C22.7771 18.6459 22.9246 18.7129 23.0721 18.7934C23.2196 18.8738 23.367 18.9543 23.5279 19.0481C24.6141 19.6918 25.727 20.5097 25.727 20.5097L26.4109 20.3622C26.25 19.2493 26.0354 18.2436 25.8209 17.3988C25.955 17.3854 26.0891 17.3586 26.2231 17.3318C26.8131 19.3968 27.1215 21.4617 27.1215 21.4617V21.4886V21.502Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
286
|
+
<path d="M28.5831 13.7395C28.4222 13.7663 28.2478 13.7797 28.0601 13.8066C27.8456 13.2166 27.6042 12.6802 27.3628 12.2779C27.1885 11.9964 26.9874 12.0768 27.1483 12.3316C27.1483 12.3316 27.3896 12.8679 27.7115 13.8468C27.041 13.9406 26.3035 14.0613 25.5392 14.2222C25.3247 13.7931 25.0967 13.4311 24.8822 13.1629L23.89 12.9886C28.6769 9.52912 34.7645 5.1176 34.7645 5.1176C34.7913 5.09078 34.8182 5.07737 34.8584 5.06396C35.1668 4.9701 35.3679 5.34555 35.0729 5.74782C34.8852 6.00259 34.4964 6.64621 34.2148 7.0887C34.0807 7.28984 34.0673 7.57142 34.2148 8.17482C34.3489 8.76481 34.1075 8.63073 34.1075 8.63073C34.1075 8.63073 33.8393 7.92005 33.5577 7.42393C33.4236 7.19598 33.2628 7.16916 33.3835 7.46415C33.5444 7.85301 33.7723 8.61732 33.8259 8.88549C33.8661 9.0464 33.9198 9.27435 33.6114 9.23412C33.2628 9.1939 32.8069 9.18049 32.351 9.1939C32.1498 9.1939 31.9487 9.1939 31.761 9.1939C31.6805 9.03299 31.6134 8.91231 31.5598 8.80504C31.4257 8.55027 31.238 8.61732 31.3453 8.83186C31.3989 8.95254 31.4525 9.07322 31.5062 9.1939C31.171 9.20731 30.876 9.23413 30.7017 9.24753C30.286 9.30117 30.3262 9.51571 30.7419 9.48889C31.0369 9.47548 31.3319 9.46208 31.6135 9.46208C31.8548 10.0655 32.0425 10.6421 32.1632 11.1516C32.0157 11.1382 31.3721 11.098 30.4737 11.1382C30.3262 11.1382 30.1787 11.1382 30.0312 11.1516C29.8703 10.7761 29.7228 10.4811 29.6155 10.2934C29.468 10.0118 29.2937 10.1459 29.4278 10.4007C29.4278 10.4007 29.5619 10.6823 29.763 11.1784C29.3474 11.2052 28.9048 11.2589 28.4623 11.3259C28.0333 11.393 28.0333 11.5673 28.4623 11.5405C28.4623 11.5405 29.0255 11.4734 29.8703 11.46C30.0714 11.9829 30.2994 12.6802 30.5139 13.5116C30.2994 13.5116 29.5619 13.5786 28.5696 13.7127L28.5831 13.7395Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
287
|
+
<path d="M32.4299 9.51518C32.9126 9.51518 33.2344 9.55541 33.2344 9.60904C33.516 10.7086 32.8992 10.7086 32.8858 11.1108C32.8858 11.2047 32.926 11.5533 32.926 11.6204C32.9663 11.9422 32.7383 11.8483 32.7383 11.8483C32.4567 10.8561 32.1215 10.0649 31.8668 9.50177C32.0679 9.50177 32.2556 9.50177 32.4299 9.50177V9.51518Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
288
|
+
<path d="M30.5943 11.4865C31.1038 11.4865 31.667 11.5133 32.2436 11.5669C32.3642 12.0898 32.4313 12.5458 32.4582 12.8542C32.485 13.1223 32.2838 13.3637 32.0156 13.3771C31.8279 13.3771 31.6402 13.3771 31.4927 13.3905C31.3854 13.3905 31.3049 13.4844 31.3049 13.5916C31.3586 14.128 31.3854 14.2889 31.3988 14.49C31.4256 14.7984 31.1977 14.7314 31.1977 14.7314C30.8625 13.3637 30.4736 12.2776 30.1384 11.4865C30.2859 11.4865 30.4334 11.4865 30.5809 11.4865H30.5943Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
289
|
+
<path d="M32.3235 9.20575C32.3637 9.29961 32.3906 9.40688 32.4308 9.51415C32.2565 9.51415 32.0688 9.51415 31.8677 9.51415C31.814 9.40688 31.7737 9.31302 31.7335 9.23257C31.9212 9.23257 32.1224 9.23257 32.3235 9.23257V9.20575Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
290
|
+
<path d="M32.1896 11.2038L32.3237 11.5793H32.2567C32.2298 11.4586 32.203 11.3245 32.1628 11.2038C32.1762 11.2038 32.1896 11.2038 32.1896 11.2038Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
291
|
+
<path d="M32.1631 11.1901C32.1899 11.3242 32.2302 11.4448 32.257 11.5655C31.6804 11.5119 31.1172 11.4985 30.6077 11.4851C30.5675 11.3778 30.5138 11.2705 30.4736 11.1767C31.372 11.1364 32.0156 11.1767 32.1631 11.1901Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
292
|
+
<path d="M31.7342 9.21866C31.7744 9.29911 31.8281 9.39297 31.8683 9.50024C31.7745 9.50024 31.694 9.50024 31.6001 9.50024C31.5599 9.40638 31.5197 9.31252 31.4794 9.21866C31.5599 9.21866 31.6403 9.21866 31.7208 9.21866H31.7342Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
293
|
+
<path d="M31.4913 9.23154C31.5316 9.3254 31.5718 9.41926 31.612 9.51312C31.3305 9.51312 31.0354 9.51312 30.7404 9.53994C30.3114 9.55335 30.2712 9.35222 30.7003 9.29858C30.8746 9.28517 31.1561 9.25835 31.5048 9.24495L31.4913 9.23154Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
294
|
+
<path d="M31.5318 8.83076C31.5855 8.92462 31.6525 9.05871 31.7329 9.21962C31.6525 9.21962 31.572 9.21962 31.4916 9.21962C31.4379 9.09894 31.3843 8.97826 31.3307 8.85758C31.2234 8.64304 31.4111 8.56258 31.5452 8.83076H31.5318Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
295
|
+
<path d="M28.7023 14.086C29.346 14.0055 29.9896 13.9519 30.6198 13.9117C30.7941 14.6224 30.9416 15.4135 31.0489 16.2582C31.0623 16.3923 30.9685 16.513 30.8344 16.513C30.4723 16.5264 29.8019 16.5666 29.5605 16.6203C29.3326 16.6605 29.3996 16.7812 29.413 17.036C29.4399 17.2907 29.4667 17.4784 29.4801 17.7332C29.4801 17.9075 29.4666 18.0684 29.2923 18.0818C29.2789 18.0818 29.2656 18.0818 29.2656 18.0818C29.2656 18.0818 28.8231 15.9632 28.1794 14.1396C28.3538 14.1128 28.528 14.0994 28.7023 14.0726V14.086Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
296
|
+
<path d="M30.5932 13.5372L30.6871 13.8992H30.6066C30.5798 13.7786 30.553 13.6579 30.5128 13.5372C30.553 13.5372 30.5798 13.5372 30.5798 13.5372H30.5932Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
297
|
+
<path d="M30.594 11.4859C30.4331 11.4859 30.2856 11.4859 30.1515 11.4859C30.1113 11.3787 30.0711 11.2848 30.0309 11.1909C30.1784 11.1909 30.3258 11.1775 30.4733 11.1775C30.5135 11.2714 30.5538 11.3787 30.6075 11.4859H30.594Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
298
|
+
<path d="M30.5273 13.5506C30.5541 13.6713 30.5942 13.792 30.621 13.9126C29.9908 13.9529 29.3472 14.0199 28.7036 14.087C28.6634 13.9663 28.6232 13.8456 28.5829 13.7383C29.5886 13.6177 30.3127 13.5506 30.5273 13.5372V13.5506Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
299
|
+
<path d="M30.0294 11.1909C30.0697 11.2848 30.1098 11.3786 30.1501 11.4859C30.0562 11.4859 29.9623 11.4859 29.8684 11.4859C29.8282 11.3921 29.788 11.2982 29.7612 11.2043C29.8551 11.2043 29.9355 11.2043 30.016 11.1909H30.0294Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
300
|
+
<path d="M29.7628 11.2167C29.7896 11.3106 29.8298 11.391 29.87 11.4983C29.0252 11.5117 28.4621 11.5654 28.4621 11.5788C28.033 11.6056 28.033 11.4313 28.4621 11.3642C28.918 11.2972 29.3605 11.2436 29.7628 11.2167Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
301
|
+
<path d="M30.0294 11.1904C29.949 11.1904 29.8551 11.1904 29.7746 11.2038C29.5735 10.7077 29.4394 10.4261 29.4394 10.4261C29.3053 10.1713 29.4662 10.0372 29.6271 10.3188C29.7344 10.5065 29.8684 10.8015 30.0428 11.177L30.0294 11.1904Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
302
|
+
<path d="M26.6652 17.2772C27.282 17.1834 27.9257 17.1029 28.5827 17.0359C28.7034 17.5588 28.8106 18.122 28.9179 18.7254C28.9984 19.1679 29.0386 19.6238 29.052 19.8786C29.052 19.9992 28.9716 20.1065 28.8509 20.1199C28.5425 20.1602 27.9793 20.254 27.6172 20.3077C27.4831 20.3211 27.3759 20.4552 27.3759 20.5892C27.3625 21.1256 27.5099 21.4608 27.282 21.501C27.2552 21.501 27.2016 21.501 27.1345 21.501V21.4742C27.1345 21.4742 26.8261 19.4093 26.2361 17.3443C26.3836 17.3175 26.5312 17.3041 26.6787 17.2772H26.6652Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
303
|
+
<path d="M28.5286 16.6878L28.6761 17.023H28.5689C28.542 16.9157 28.5152 16.8085 28.4884 16.6878C28.5152 16.6878 28.5286 16.6878 28.5286 16.6878Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
304
|
+
<path d="M28.582 13.7387C28.6223 13.8459 28.6625 13.9666 28.7027 14.0873C28.5284 14.1007 28.3541 14.1275 28.1798 14.1544C28.1396 14.0337 28.0993 13.9264 28.0591 13.8191C28.2468 13.7923 28.4077 13.7655 28.582 13.7521V13.7387Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
305
|
+
<path d="M28.4894 16.6878C28.5162 16.795 28.543 16.9157 28.5699 17.0364C27.9128 17.1035 27.2692 17.1839 26.6524 17.2778C26.6256 17.1571 26.5988 17.0498 26.5585 16.9291C27.591 16.7816 28.3151 16.7012 28.4894 16.6878Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
306
|
+
<path d="M28.0596 13.8042C28.0998 13.9115 28.1401 14.0322 28.1803 14.1395C28.0596 14.1529 27.9389 14.1663 27.8182 14.1931C27.778 14.0724 27.7512 13.9651 27.7109 13.8579C27.8316 13.8445 27.9523 13.8176 28.0596 13.8042Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
307
|
+
<path d="M27.8186 14.1948C28.0331 14.8653 28.2745 15.71 28.5024 16.6889C28.3415 16.6889 27.604 16.7827 26.5716 16.9302C26.3302 16.0721 26.0217 15.2273 25.6865 14.53C26.3436 14.4094 27.0677 14.3021 27.832 14.1948H27.8186Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
308
|
+
<path d="M28.0579 13.805C27.9506 13.8184 27.8299 13.8318 27.7092 13.8586C27.3874 12.8797 27.1461 12.3434 27.1461 12.3434C26.9852 12.0886 27.1863 12.0082 27.3606 12.2897C27.602 12.692 27.8433 13.2284 28.0579 13.8184V13.805Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
309
|
+
<path d="M27.7094 13.8596C27.7496 13.9668 27.7765 14.0741 27.8167 14.1948C27.0658 14.2886 26.3417 14.4093 25.6713 14.53C25.6177 14.4227 25.5774 14.3289 25.5237 14.235C26.288 14.0875 27.0255 13.9534 27.696 13.8596H27.7094Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
310
|
+
<path d="M26.5712 16.929C26.5981 17.0497 26.6383 17.1569 26.6651 17.2776C26.5176 17.291 26.3701 17.3178 26.2226 17.3447C26.1958 17.224 26.1555 17.1167 26.1287 16.996C26.2762 16.9692 26.4372 16.9558 26.5712 16.929Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
311
|
+
<path d="M26.5173 21.7828C27.2279 22.5605 27.5096 23.5662 25.7262 25.725L15.5354 18.5781C15.5354 18.5781 16.2863 17.9881 16.9031 17.5188C17.3456 17.1701 17.7077 17.0629 18.2038 17.1299C18.2709 17.0763 20.8186 15.2527 23.8892 13.0268L24.8814 13.2011C25.096 13.4693 25.3105 13.8313 25.5385 14.2604C25.3775 14.2872 25.2167 14.3275 25.0557 14.3543C25.0155 14.2872 24.9753 14.2336 24.9485 14.1665C24.7741 13.8984 24.573 13.9654 24.734 14.2202C24.734 14.2202 24.7608 14.2738 24.8144 14.3945C24.1976 14.5286 23.5808 14.6895 22.9908 14.8638C22.7629 14.9309 22.6555 15.0113 22.6958 15.0515L22.0789 15.6818C22.0119 15.6818 21.9851 15.7756 22.0789 15.9097C22.0789 15.9097 22.374 16.5265 22.736 17.626C22.2399 17.7333 21.7437 17.854 21.2476 17.9747C19.9201 17.5054 19.8665 17.8138 20.3895 17.9479C21.6633 18.2965 24.6669 19.7178 26.5441 21.7828H26.5173Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
312
|
+
<path d="M23.6066 17.7998C24.2636 17.6657 25.0145 17.5182 25.8191 17.3975C26.0336 18.2423 26.2482 19.2479 26.4091 20.3609L25.7252 20.5084C25.7252 20.5084 24.6123 19.677 23.5261 19.0468C23.4189 18.6579 23.2982 18.2691 23.1775 17.907C23.3116 17.8802 23.4591 17.8534 23.6066 17.8132V17.7998Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
313
|
+
<path d="M26.1146 16.9967C26.1548 17.1174 26.1816 17.2246 26.2085 17.3453C26.0744 17.3587 25.9403 17.3855 25.8062 17.4123C25.7794 17.2917 25.7392 17.1844 25.7123 17.0637C25.8464 17.0369 25.9805 17.0235 26.1012 16.9967H26.1146Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
314
|
+
<path d="M25.6713 14.5301C26.0065 15.2274 26.3148 16.0721 26.5562 16.9303C26.4087 16.9437 26.2612 16.9705 26.1137 16.9973C25.8589 16.1392 25.5505 15.2944 25.1885 14.6105C25.336 14.5837 25.4969 14.5569 25.6578 14.5301H25.6713Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
315
|
+
<path d="M26.1149 16.9975C25.9808 17.0109 25.8601 17.0377 25.726 17.0645C25.4176 15.965 25.1092 15.1471 24.9214 14.6778C25.0153 14.6643 25.1092 14.6375 25.2031 14.6241C25.5517 15.2946 25.8601 16.1393 26.1283 17.0109L26.1149 16.9975Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
316
|
+
<path d="M25.7256 17.0493C25.7525 17.1566 25.7927 17.2773 25.8195 17.3979C25.015 17.532 24.2641 17.6661 23.607 17.8002C23.5668 17.6795 23.5266 17.5589 23.4864 17.4516C24.2775 17.2907 25.0418 17.1566 25.7256 17.0493Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
317
|
+
<path d="M25.5245 14.2341C25.5781 14.3279 25.6184 14.4218 25.6721 14.5291C25.5112 14.5559 25.3502 14.5827 25.2027 14.6095C25.1491 14.5157 25.0954 14.4218 25.0418 14.3279C25.2027 14.2877 25.3636 14.2609 25.5245 14.2341Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
318
|
+
<path d="M23.4862 17.4524C23.3387 17.4792 23.1911 17.506 23.0436 17.5462C22.7889 16.8758 22.5207 16.2724 22.2659 15.8433C22.1854 15.7226 22.105 15.669 22.0514 15.669L22.6681 15.0388C22.6681 15.0388 22.8559 15.079 23.1643 15.012C23.5799 14.9181 24.1834 14.7974 24.8941 14.6633C25.0952 15.1326 25.4036 15.9506 25.6986 17.0501C25.0147 17.1574 24.2638 17.2915 23.4593 17.4524H23.4862Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
319
|
+
<path d="M25.0424 14.3281C25.0961 14.4219 25.1497 14.5158 25.2033 14.6097C25.1095 14.6231 25.0156 14.6365 24.9217 14.6633C24.8815 14.556 24.8413 14.4622 24.8011 14.3817C24.8815 14.3683 24.962 14.3415 25.0424 14.3281Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
320
|
+
<path d="M24.9359 14.1541C24.9359 14.1541 25.0164 14.2748 25.0432 14.3419C24.9628 14.3553 24.8823 14.3821 24.8019 14.3955C24.7482 14.2748 24.7214 14.2212 24.7214 14.2212C24.5605 13.9664 24.7616 13.886 24.9359 14.1676V14.1541Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
321
|
+
<path d="M24.8004 14.3807C24.8272 14.4478 24.8674 14.5416 24.921 14.6623C24.1969 14.7964 23.607 14.9171 23.1913 15.0109C22.8829 15.078 22.722 15.078 22.6952 15.0377C22.655 14.9975 22.7757 14.9171 22.9902 14.85C23.5802 14.6757 24.197 14.5148 24.8138 14.3807H24.8004Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
322
|
+
<path d="M23.4863 17.4528C23.5265 17.5601 23.5667 17.6808 23.6069 17.8015C23.4594 17.8283 23.3119 17.8551 23.1778 17.8953C23.1376 17.7746 23.0974 17.654 23.0572 17.5467C23.2047 17.5199 23.3521 17.493 23.4996 17.4528H23.4863Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
323
|
+
<path d="M23.178 17.895C23.3121 18.257 23.4194 18.6459 23.5266 19.0347C23.3791 18.9409 23.2183 18.8604 23.0708 18.78C22.9903 18.485 22.9098 18.2168 22.8293 17.962C22.9366 17.9352 23.0573 17.9084 23.178 17.895Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
324
|
+
<path d="M23.0571 17.5468C23.0974 17.6675 23.1376 17.7748 23.1778 17.8955C23.0571 17.9223 22.9498 17.9491 22.8291 17.9625C22.7889 17.8418 22.7487 17.7212 22.7219 17.6139C22.8292 17.5871 22.9499 17.5603 23.0571 17.5468Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
325
|
+
<path d="M22.2665 15.8434C22.5346 16.2725 22.8028 16.8625 23.0442 17.5463C22.9369 17.5732 22.8163 17.6 22.709 17.6134C22.3469 16.5139 22.052 15.897 22.052 15.897C21.9581 15.7496 21.9849 15.6691 22.052 15.6691C22.1056 15.6691 22.186 15.7227 22.2665 15.8434Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
326
|
+
<path d="M22.8297 17.9632C22.9101 18.218 22.9906 18.4862 23.0711 18.7812C22.9236 18.7007 22.7895 18.6337 22.642 18.5666C22.3336 18.4191 22.052 18.2984 21.7972 18.1912C22.0788 18.1241 22.4274 18.0437 22.8297 17.9632Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
327
|
+
<path d="M22.7231 17.6124C22.7633 17.7197 22.8035 17.8403 22.8303 17.961C22.4415 18.0415 22.0929 18.1219 21.7979 18.189C21.5833 18.0951 21.3956 18.0281 21.2213 17.9744C21.7174 17.8403 22.227 17.7331 22.7097 17.6258L22.7231 17.6124Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
328
|
+
<path d="M21.7983 18.1912C21.7983 18.1912 21.7714 18.1912 21.7446 18.1912C21.3692 18.0839 21.3692 18.0705 21.1949 17.9632C21.1949 17.9632 21.1949 17.9632 21.2083 17.9632C21.3826 18.0169 21.5703 18.0973 21.7849 18.1778L21.7983 18.1912Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
329
|
+
<path d="M34.8576 5.07605C34.8308 5.08946 34.7905 5.11628 34.7637 5.12969C34.7637 5.12969 28.6895 9.5278 23.8891 13.0007C20.8185 15.2266 18.2708 17.0636 18.2038 17.1038C17.7076 17.0502 17.3456 17.1574 16.9031 17.4927C16.2997 17.962 15.5353 18.552 15.5353 18.552L25.7261 25.6989L28.1129 27.375C28.1129 27.375 28.4079 26.7582 28.7967 25.8464C29.1856 24.9212 29.1856 24.653 28.9845 24.063C29.0783 23.7948 35.7425 5.86718 35.7425 5.86718C35.9437 5.31741 35.3671 4.82128 34.871 5.06264L34.8576 5.07605Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
330
|
+
<path d="M27.1214 21.502C27.1214 21.502 27.242 21.502 27.2689 21.502C27.4968 21.4618 27.3493 21.1131 27.3627 20.5902C27.3627 20.4561 27.4834 20.3354 27.6041 20.3086C27.9661 20.2415 28.5293 20.1611 28.8378 20.1209C28.9584 20.1075 29.0388 20.0002 29.0388 19.8795C29.0254 19.6247 29.2534 18.0961 29.2534 18.0961C29.2534 18.0961 29.2534 18.0961 29.2802 18.0961C29.4545 18.0827 29.4813 17.9084 29.4679 17.7475C29.4545 17.4927 29.4277 17.305 29.4009 17.0502C29.3741 16.8089 29.3204 16.6882 29.5484 16.6346C29.7763 16.5809 30.4468 16.5407 30.8222 16.5273C30.9563 16.5273 31.0502 16.3932 31.0368 16.2725C30.943 15.4144 30.6614 13.9126 30.6882 13.9126C30.6882 13.9126 30.8625 13.3762 31.1977 14.7439C31.1977 14.7439 31.439 14.8244 31.3988 14.5025C31.3854 14.3014 31.3586 14.1539 31.3049 13.6042C31.3049 13.4969 31.372 13.403 31.4927 13.403C31.6268 13.403 31.8279 13.403 32.0156 13.3896C32.2838 13.3896 32.4984 13.1482 32.4582 12.8667C32.4179 12.5583 32.4581 10.8687 32.7397 11.861C32.7397 11.861 32.9677 11.9549 32.9274 11.633C32.9274 11.5526 32.8738 11.204 32.8872 11.1235C32.8872 10.7078 33.5174 10.7078 33.2358 9.62172C33.2358 9.58149 33.2358 9.23286 33.5845 9.27308C33.8929 9.31331 33.8393 9.08536 33.7991 8.92445C33.7454 8.65628 34.0806 8.66969 34.0806 8.66969C34.0806 8.66969 34.322 8.80377 34.1879 8.21378C34.0538 7.61038 34.0672 7.3288 34.1879 7.12767C34.4695 6.67176 34.8583 6.04155 35.0461 5.78678C35.3411 5.38451 35.1399 4.99565 34.8315 5.10293C35.3276 4.86157 35.9176 5.34429 35.7031 5.90746C35.7031 5.90746 29.0388 23.8351 28.945 24.1033C29.1461 24.6933 29.1462 24.9749 28.7573 25.8867C28.3684 26.7985 28.0734 27.4153 28.0734 27.4153L25.6866 25.7392C27.47 23.5804 27.2019 22.5747 26.4778 21.797C24.6005 19.732 21.5969 18.3107 20.3231 17.962C19.8001 17.8279 21.1812 17.9889 21.1678 17.9889C21.3287 18.0961 22.8842 18.7129 23.0317 18.7934C23.1792 18.8738 25.6866 20.5231 25.6866 20.5231L27.0812 21.4886V21.5154L27.1214 21.502Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
331
|
+
<path d="M21.2078 17.9748C25.4584 17.7066 29.3068 15.3466 31.4924 11.6726L34.2144 7.10019L34.7776 7.54268L28.4218 23.6736L26.6384 21.3941L25.7266 20.4822L21.2212 17.948L21.2078 17.9748Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
332
|
+
<path d="M42.3535 28.0579C40.7847 28.1786 35.7966 28.6211 32.0019 28.9563C28.8374 27.6959 23.7286 27.1059 17.9494 27.1059C8.34867 27.1059 11.3522 28.8758 11.3522 32.5499C11.3522 35.0976 14.5971 39.4286 14.2887 37.9671C14.5971 38.0341 17.413 38.9057 18.3114 38.9057C27.6842 38.9057 34.9519 36.1971 35.3005 32.6437C38.3577 31.1688 43.3726 28.7686 43.8017 28.5942C44.7269 28.2322 43.9492 27.9104 42.3535 28.0445V28.0579Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
333
|
+
<path d="M29.5886 33.1692C29.5886 33.6386 29.4679 34.1615 29.24 34.671C29.7629 32.0161 27.4968 31.1981 26.3973 31.0506C25.6062 30.9836 28.0063 30.7288 28.4488 28.2616C28.3952 29.0929 28.2075 29.8975 27.9259 30.6618C28.9182 31.1445 29.5886 32.0831 29.5886 33.1692Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
334
|
+
<path d="M26.3964 31.0497C27.496 31.1972 29.7621 32.0286 29.2391 34.6701C28.7028 35.9037 27.5094 37.1373 25.6456 37.7273C23.004 38.5587 20.0138 38.8537 17.3455 38.7464V38.7196C18.445 38.7598 19.4104 38.6257 19.7725 38.4782C21.462 37.8078 20.4563 36.1049 19.0484 35.9976C15.2269 35.6892 14.0066 35.1126 14.9586 35.1528C16.6482 35.2065 18.8875 34.9651 20.1345 34.1472C21.3816 33.3292 21.167 31.6665 19.8261 31.6397C18.0293 31.5995 17.5868 31.9615 18.5925 31.157C23.4063 27.3086 21.2743 18.8208 16.6214 18.2442C18.3512 18.3515 20.5368 18.9415 22.186 19.8801C25.1762 21.5696 27.925 24.6805 28.3944 26.7186C28.4614 27.0405 28.448 27.3623 28.448 27.6975C28.448 27.8852 28.448 28.0595 28.4346 28.2473C28.0055 30.7145 25.5919 30.9693 26.383 31.0363L26.3964 31.0497Z" fill="var(--sapContent_Illustrative_Color24)"/>
|
|
335
|
+
<path d="M9.8233 35.999C9.8233 35.999 9.91771 36.026 9.95819 36.0395C9.95819 36.0125 9.95819 35.9855 9.95819 35.9585C9.91771 35.972 9.8772 35.9855 9.83673 35.999H9.8233Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
336
|
+
<path d="M14.9586 35.1662C16.6481 35.2198 18.8875 34.9918 20.1345 34.1739C21.3815 33.356 21.1669 31.6933 19.826 31.653C18.0292 31.6128 17.5868 31.9749 18.5924 31.1703C20.4965 29.6417 21.3145 27.389 21.3145 25.19C21.3145 21.8377 19.4238 18.6062 16.6079 18.2576C16.152 18.2308 15.7364 18.2442 15.3609 18.2844C10.6142 18.8207 6.94009 22.1998 6.24283 26.3029L5.89427 27.8449C4.75452 28.1935 3.97677 29.1054 3.68177 30.5535C2.24703 30.7815 1 31.881 1 33.5437C1 35.2064 4.75446 35.8098 5.74671 36.078C4.99581 36.2925 4.47285 36.6277 4.47285 37.1507C4.47285 38.0491 5.49198 38.6793 7.54354 38.9206C7.70444 38.9341 7.89219 38.9609 8.0665 38.9743C10.3728 39.1486 11.2712 38.4111 11.365 37.5395C12.7059 38.2368 14.8916 38.6793 17.3454 38.7731V38.7463C18.4449 38.8 19.4104 38.6659 19.7724 38.505C21.4619 37.8345 20.4563 36.1316 19.0484 36.0243C15.2268 35.7159 14.0066 35.1393 14.9586 35.1796V35.1662ZM7.16805 32.0419C7.16805 32.0419 7.10101 32.0419 7.0876 32.0285C7.06078 32.0017 7.04743 31.9748 7.06084 31.9346L7.34237 31.9749C7.34237 31.9749 7.2217 32.0151 7.18147 32.0419H7.16805Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
337
|
+
</svg>
|
|
338
|
+
|
|
339
|
+
<figcaption class="fd-illustrated-message__figcaption">
|
|
340
|
+
<h2 class="fd-illustrated-message__title" id="title-xsmall">Delivery Delay</h2>
|
|
341
|
+
<p class="fd-illustrated-message__text">A broken cooling system resulted in melted ice cream in transit. Another delivery is already on the way.</p>
|
|
342
|
+
</figcaption>
|
|
343
|
+
|
|
344
|
+
<div class="fd-illustrated-message__actions">
|
|
345
|
+
<button type="button" class="fd-button" aria-label="Contact Delivery Company">Contact Us</button>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
</figure>
|
|
349
|
+
</section>
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
### Base
|
|
353
|
+
|
|
354
|
+
Text-only variant without illustration, providing a minimal presentation for extremely constrained spaces. Apply the <code>.fd-illustrated-message--base</code> modifier class.
|
|
355
|
+
|
|
356
|
+
```html
|
|
357
|
+
<section role="region" aria-label="Illustrated message" aria-describedby="title-base">
|
|
358
|
+
<figure class="fd-illustrated-message fd-illustrated-message--base">
|
|
359
|
+
<div class="fd-illustrated-message__container">
|
|
360
|
+
<svg role="img" aria-label="Illustration of a melting icecream" class="fd-illustrated-message__illustration" width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg" id="sapIllus-Ice-Cream-Demo-ExtraSmall">
|
|
361
|
+
<path d="M27.1215 21.502C27.1215 21.502 27.2422 21.502 27.269 21.502C27.4969 21.4617 27.3495 21.1131 27.3629 20.5902C27.3629 20.4561 27.4835 20.3354 27.6042 20.3086C27.9663 20.2415 28.5295 20.1611 28.8379 20.1208C28.9586 20.1074 29.039 20.0002 29.039 19.8795C29.0256 19.6247 28.972 19.1822 28.9049 18.7263C28.7976 18.1363 28.6904 17.5732 28.5697 17.0368H28.677L28.5294 16.6882C28.5294 16.6882 28.5295 16.6882 28.4892 16.6882C28.2613 15.7093 28.0199 14.8646 27.8054 14.1941C27.9261 14.1807 28.0468 14.1673 28.1674 14.1405C28.7977 15.9641 29.2536 18.0827 29.2536 18.0827C29.2536 18.0827 29.2535 18.0827 29.2803 18.0827C29.4546 18.0693 29.4815 17.895 29.4681 17.7341C29.4547 17.4793 29.4279 17.2916 29.401 17.0368C29.3742 16.7954 29.3206 16.6748 29.5485 16.6211C29.7765 16.5675 30.4469 16.5273 30.8224 16.5139C30.9565 16.5139 31.0504 16.3798 31.037 16.2591C30.9431 15.4009 30.7822 14.6098 30.6079 13.9125H30.6883L30.5945 13.5371C30.5945 13.5371 30.5676 13.5371 30.5274 13.5371C30.3129 12.7057 30.0715 12.0085 29.8837 11.4855C29.9776 11.4855 30.0581 11.4855 30.1654 11.4855C30.4872 12.2767 30.8894 13.3628 31.2246 14.7305C31.2246 14.7305 31.466 14.8109 31.4258 14.4891C31.4124 14.288 31.3856 14.1405 31.3319 13.5907C31.3319 13.4835 31.399 13.3896 31.5197 13.3896C31.6538 13.3896 31.8549 13.3896 32.0426 13.3762C32.3108 13.3762 32.5253 13.1348 32.4851 12.8532C32.4448 12.5448 32.3778 12.0889 32.2706 11.566H32.3376L32.2035 11.2039C32.2035 11.2039 32.2035 11.2039 32.1767 11.2039C32.0426 10.681 31.8682 10.1044 31.6269 9.51443C31.7207 9.51443 31.8012 9.51443 31.8951 9.51443C32.1632 10.0776 32.4851 10.8687 32.7667 11.861C32.7667 11.861 32.9947 11.9548 32.9544 11.633C32.9544 11.5526 32.9008 11.2039 32.9142 11.1235C32.9142 10.7078 33.5444 10.7078 33.2628 9.6217C33.2628 9.58147 32.941 9.54124 32.4583 9.52784C32.4181 9.42056 32.3912 9.3267 32.351 9.21943C32.8069 9.21943 33.2628 9.21943 33.6114 9.25966C33.9199 9.29988 33.8662 9.07193 33.826 8.91103C33.7723 8.64285 33.5444 7.87854 33.3835 7.48969C33.2628 7.19469 33.4371 7.22151 33.5578 7.44946C33.8393 7.959 34.1076 8.65626 34.1076 8.65626C34.1076 8.65626 34.349 8.79035 34.2149 8.20036C34.0808 7.59696 34.0942 7.31537 34.2149 7.11424C34.4965 6.65834 34.8852 6.02812 35.073 5.77335C35.368 5.37108 35.1669 4.98223 34.8585 5.0895C35.3546 4.84814 35.9446 5.33086 35.7301 5.89403C35.7301 5.89403 29.0658 23.8217 28.9719 24.0899C29.1731 24.6799 29.1731 24.9615 28.7842 25.8733C28.3953 26.7851 28.1004 27.4019 28.1004 27.4019L25.7136 25.7258C27.497 23.5669 27.2288 22.5613 26.5048 21.7835C24.6275 19.7186 21.6239 18.2972 20.3501 17.9486C19.8271 17.8145 19.8942 17.5061 21.2082 17.9754C21.2082 17.9754 21.2082 17.9754 21.1948 17.9754C21.3557 18.0827 21.3557 18.0961 21.7445 18.2034C21.758 18.2034 21.7714 18.2034 21.7982 18.2034C22.053 18.3106 22.3346 18.4313 22.643 18.5788C22.7771 18.6459 22.9246 18.7129 23.0721 18.7934C23.2196 18.8738 23.367 18.9543 23.5279 19.0481C24.6141 19.6918 25.727 20.5097 25.727 20.5097L26.4109 20.3622C26.25 19.2493 26.0354 18.2436 25.8209 17.3988C25.955 17.3854 26.0891 17.3586 26.2231 17.3318C26.8131 19.3968 27.1215 21.4617 27.1215 21.4617V21.4886V21.502Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
362
|
+
<path d="M28.5831 13.7395C28.4222 13.7663 28.2478 13.7797 28.0601 13.8066C27.8456 13.2166 27.6042 12.6802 27.3628 12.2779C27.1885 11.9964 26.9874 12.0768 27.1483 12.3316C27.1483 12.3316 27.3896 12.8679 27.7115 13.8468C27.041 13.9406 26.3035 14.0613 25.5392 14.2222C25.3247 13.7931 25.0967 13.4311 24.8822 13.1629L23.89 12.9886C28.6769 9.52912 34.7645 5.1176 34.7645 5.1176C34.7913 5.09078 34.8182 5.07737 34.8584 5.06396C35.1668 4.9701 35.3679 5.34555 35.0729 5.74782C34.8852 6.00259 34.4964 6.64621 34.2148 7.0887C34.0807 7.28984 34.0673 7.57142 34.2148 8.17482C34.3489 8.76481 34.1075 8.63073 34.1075 8.63073C34.1075 8.63073 33.8393 7.92005 33.5577 7.42393C33.4236 7.19598 33.2628 7.16916 33.3835 7.46415C33.5444 7.85301 33.7723 8.61732 33.8259 8.88549C33.8661 9.0464 33.9198 9.27435 33.6114 9.23412C33.2628 9.1939 32.8069 9.18049 32.351 9.1939C32.1498 9.1939 31.9487 9.1939 31.761 9.1939C31.6805 9.03299 31.6134 8.91231 31.5598 8.80504C31.4257 8.55027 31.238 8.61732 31.3453 8.83186C31.3989 8.95254 31.4525 9.07322 31.5062 9.1939C31.171 9.20731 30.876 9.23413 30.7017 9.24753C30.286 9.30117 30.3262 9.51571 30.7419 9.48889C31.0369 9.47548 31.3319 9.46208 31.6135 9.46208C31.8548 10.0655 32.0425 10.6421 32.1632 11.1516C32.0157 11.1382 31.3721 11.098 30.4737 11.1382C30.3262 11.1382 30.1787 11.1382 30.0312 11.1516C29.8703 10.7761 29.7228 10.4811 29.6155 10.2934C29.468 10.0118 29.2937 10.1459 29.4278 10.4007C29.4278 10.4007 29.5619 10.6823 29.763 11.1784C29.3474 11.2052 28.9048 11.2589 28.4623 11.3259C28.0333 11.393 28.0333 11.5673 28.4623 11.5405C28.4623 11.5405 29.0255 11.4734 29.8703 11.46C30.0714 11.9829 30.2994 12.6802 30.5139 13.5116C30.2994 13.5116 29.5619 13.5786 28.5696 13.7127L28.5831 13.7395Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
363
|
+
<path d="M32.4299 9.51518C32.9126 9.51518 33.2344 9.55541 33.2344 9.60904C33.516 10.7086 32.8992 10.7086 32.8858 11.1108C32.8858 11.2047 32.926 11.5533 32.926 11.6204C32.9663 11.9422 32.7383 11.8483 32.7383 11.8483C32.4567 10.8561 32.1215 10.0649 31.8668 9.50177C32.0679 9.50177 32.2556 9.50177 32.4299 9.50177V9.51518Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
364
|
+
<path d="M30.5943 11.4865C31.1038 11.4865 31.667 11.5133 32.2436 11.5669C32.3642 12.0898 32.4313 12.5458 32.4582 12.8542C32.485 13.1223 32.2838 13.3637 32.0156 13.3771C31.8279 13.3771 31.6402 13.3771 31.4927 13.3905C31.3854 13.3905 31.3049 13.4844 31.3049 13.5916C31.3586 14.128 31.3854 14.2889 31.3988 14.49C31.4256 14.7984 31.1977 14.7314 31.1977 14.7314C30.8625 13.3637 30.4736 12.2776 30.1384 11.4865C30.2859 11.4865 30.4334 11.4865 30.5809 11.4865H30.5943Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
365
|
+
<path d="M32.3235 9.20575C32.3637 9.29961 32.3906 9.40688 32.4308 9.51415C32.2565 9.51415 32.0688 9.51415 31.8677 9.51415C31.814 9.40688 31.7737 9.31302 31.7335 9.23257C31.9212 9.23257 32.1224 9.23257 32.3235 9.23257V9.20575Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
366
|
+
<path d="M32.1896 11.2038L32.3237 11.5793H32.2567C32.2298 11.4586 32.203 11.3245 32.1628 11.2038C32.1762 11.2038 32.1896 11.2038 32.1896 11.2038Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
367
|
+
<path d="M32.1631 11.1901C32.1899 11.3242 32.2302 11.4448 32.257 11.5655C31.6804 11.5119 31.1172 11.4985 30.6077 11.4851C30.5675 11.3778 30.5138 11.2705 30.4736 11.1767C31.372 11.1364 32.0156 11.1767 32.1631 11.1901Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
368
|
+
<path d="M31.7342 9.21866C31.7744 9.29911 31.8281 9.39297 31.8683 9.50024C31.7745 9.50024 31.694 9.50024 31.6001 9.50024C31.5599 9.40638 31.5197 9.31252 31.4794 9.21866C31.5599 9.21866 31.6403 9.21866 31.7208 9.21866H31.7342Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
369
|
+
<path d="M31.4913 9.23154C31.5316 9.3254 31.5718 9.41926 31.612 9.51312C31.3305 9.51312 31.0354 9.51312 30.7404 9.53994C30.3114 9.55335 30.2712 9.35222 30.7003 9.29858C30.8746 9.28517 31.1561 9.25835 31.5048 9.24495L31.4913 9.23154Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
370
|
+
<path d="M31.5318 8.83076C31.5855 8.92462 31.6525 9.05871 31.7329 9.21962C31.6525 9.21962 31.572 9.21962 31.4916 9.21962C31.4379 9.09894 31.3843 8.97826 31.3307 8.85758C31.2234 8.64304 31.4111 8.56258 31.5452 8.83076H31.5318Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
371
|
+
<path d="M28.7023 14.086C29.346 14.0055 29.9896 13.9519 30.6198 13.9117C30.7941 14.6224 30.9416 15.4135 31.0489 16.2582C31.0623 16.3923 30.9685 16.513 30.8344 16.513C30.4723 16.5264 29.8019 16.5666 29.5605 16.6203C29.3326 16.6605 29.3996 16.7812 29.413 17.036C29.4399 17.2907 29.4667 17.4784 29.4801 17.7332C29.4801 17.9075 29.4666 18.0684 29.2923 18.0818C29.2789 18.0818 29.2656 18.0818 29.2656 18.0818C29.2656 18.0818 28.8231 15.9632 28.1794 14.1396C28.3538 14.1128 28.528 14.0994 28.7023 14.0726V14.086Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
372
|
+
<path d="M30.5932 13.5372L30.6871 13.8992H30.6066C30.5798 13.7786 30.553 13.6579 30.5128 13.5372C30.553 13.5372 30.5798 13.5372 30.5798 13.5372H30.5932Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
373
|
+
<path d="M30.594 11.4859C30.4331 11.4859 30.2856 11.4859 30.1515 11.4859C30.1113 11.3787 30.0711 11.2848 30.0309 11.1909C30.1784 11.1909 30.3258 11.1775 30.4733 11.1775C30.5135 11.2714 30.5538 11.3787 30.6075 11.4859H30.594Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
374
|
+
<path d="M30.5273 13.5506C30.5541 13.6713 30.5942 13.792 30.621 13.9126C29.9908 13.9529 29.3472 14.0199 28.7036 14.087C28.6634 13.9663 28.6232 13.8456 28.5829 13.7383C29.5886 13.6177 30.3127 13.5506 30.5273 13.5372V13.5506Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
375
|
+
<path d="M30.0294 11.1909C30.0697 11.2848 30.1098 11.3786 30.1501 11.4859C30.0562 11.4859 29.9623 11.4859 29.8684 11.4859C29.8282 11.3921 29.788 11.2982 29.7612 11.2043C29.8551 11.2043 29.9355 11.2043 30.016 11.1909H30.0294Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
376
|
+
<path d="M29.7628 11.2167C29.7896 11.3106 29.8298 11.391 29.87 11.4983C29.0252 11.5117 28.4621 11.5654 28.4621 11.5788C28.033 11.6056 28.033 11.4313 28.4621 11.3642C28.918 11.2972 29.3605 11.2436 29.7628 11.2167Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
377
|
+
<path d="M30.0294 11.1904C29.949 11.1904 29.8551 11.1904 29.7746 11.2038C29.5735 10.7077 29.4394 10.4261 29.4394 10.4261C29.3053 10.1713 29.4662 10.0372 29.6271 10.3188C29.7344 10.5065 29.8684 10.8015 30.0428 11.177L30.0294 11.1904Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
378
|
+
<path d="M26.6652 17.2772C27.282 17.1834 27.9257 17.1029 28.5827 17.0359C28.7034 17.5588 28.8106 18.122 28.9179 18.7254C28.9984 19.1679 29.0386 19.6238 29.052 19.8786C29.052 19.9992 28.9716 20.1065 28.8509 20.1199C28.5425 20.1602 27.9793 20.254 27.6172 20.3077C27.4831 20.3211 27.3759 20.4552 27.3759 20.5892C27.3625 21.1256 27.5099 21.4608 27.282 21.501C27.2552 21.501 27.2016 21.501 27.1345 21.501V21.4742C27.1345 21.4742 26.8261 19.4093 26.2361 17.3443C26.3836 17.3175 26.5312 17.3041 26.6787 17.2772H26.6652Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
379
|
+
<path d="M28.5286 16.6878L28.6761 17.023H28.5689C28.542 16.9157 28.5152 16.8085 28.4884 16.6878C28.5152 16.6878 28.5286 16.6878 28.5286 16.6878Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
380
|
+
<path d="M28.582 13.7387C28.6223 13.8459 28.6625 13.9666 28.7027 14.0873C28.5284 14.1007 28.3541 14.1275 28.1798 14.1544C28.1396 14.0337 28.0993 13.9264 28.0591 13.8191C28.2468 13.7923 28.4077 13.7655 28.582 13.7521V13.7387Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
381
|
+
<path d="M28.4894 16.6878C28.5162 16.795 28.543 16.9157 28.5699 17.0364C27.9128 17.1035 27.2692 17.1839 26.6524 17.2778C26.6256 17.1571 26.5988 17.0498 26.5585 16.9291C27.591 16.7816 28.3151 16.7012 28.4894 16.6878Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
382
|
+
<path d="M28.0596 13.8042C28.0998 13.9115 28.1401 14.0322 28.1803 14.1395C28.0596 14.1529 27.9389 14.1663 27.8182 14.1931C27.778 14.0724 27.7512 13.9651 27.7109 13.8579C27.8316 13.8445 27.9523 13.8176 28.0596 13.8042Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
383
|
+
<path d="M27.8186 14.1948C28.0331 14.8653 28.2745 15.71 28.5024 16.6889C28.3415 16.6889 27.604 16.7827 26.5716 16.9302C26.3302 16.0721 26.0217 15.2273 25.6865 14.53C26.3436 14.4094 27.0677 14.3021 27.832 14.1948H27.8186Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
384
|
+
<path d="M28.0579 13.805C27.9506 13.8184 27.8299 13.8318 27.7092 13.8586C27.3874 12.8797 27.1461 12.3434 27.1461 12.3434C26.9852 12.0886 27.1863 12.0082 27.3606 12.2897C27.602 12.692 27.8433 13.2284 28.0579 13.8184V13.805Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
385
|
+
<path d="M27.7094 13.8596C27.7496 13.9668 27.7765 14.0741 27.8167 14.1948C27.0658 14.2886 26.3417 14.4093 25.6713 14.53C25.6177 14.4227 25.5774 14.3289 25.5237 14.235C26.288 14.0875 27.0255 13.9534 27.696 13.8596H27.7094Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
386
|
+
<path d="M26.5712 16.929C26.5981 17.0497 26.6383 17.1569 26.6651 17.2776C26.5176 17.291 26.3701 17.3178 26.2226 17.3447C26.1958 17.224 26.1555 17.1167 26.1287 16.996C26.2762 16.9692 26.4372 16.9558 26.5712 16.929Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
387
|
+
<path d="M26.5173 21.7828C27.2279 22.5605 27.5096 23.5662 25.7262 25.725L15.5354 18.5781C15.5354 18.5781 16.2863 17.9881 16.9031 17.5188C17.3456 17.1701 17.7077 17.0629 18.2038 17.1299C18.2709 17.0763 20.8186 15.2527 23.8892 13.0268L24.8814 13.2011C25.096 13.4693 25.3105 13.8313 25.5385 14.2604C25.3775 14.2872 25.2167 14.3275 25.0557 14.3543C25.0155 14.2872 24.9753 14.2336 24.9485 14.1665C24.7741 13.8984 24.573 13.9654 24.734 14.2202C24.734 14.2202 24.7608 14.2738 24.8144 14.3945C24.1976 14.5286 23.5808 14.6895 22.9908 14.8638C22.7629 14.9309 22.6555 15.0113 22.6958 15.0515L22.0789 15.6818C22.0119 15.6818 21.9851 15.7756 22.0789 15.9097C22.0789 15.9097 22.374 16.5265 22.736 17.626C22.2399 17.7333 21.7437 17.854 21.2476 17.9747C19.9201 17.5054 19.8665 17.8138 20.3895 17.9479C21.6633 18.2965 24.6669 19.7178 26.5441 21.7828H26.5173Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
388
|
+
<path d="M23.6066 17.7998C24.2636 17.6657 25.0145 17.5182 25.8191 17.3975C26.0336 18.2423 26.2482 19.2479 26.4091 20.3609L25.7252 20.5084C25.7252 20.5084 24.6123 19.677 23.5261 19.0468C23.4189 18.6579 23.2982 18.2691 23.1775 17.907C23.3116 17.8802 23.4591 17.8534 23.6066 17.8132V17.7998Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
389
|
+
<path d="M26.1146 16.9967C26.1548 17.1174 26.1816 17.2246 26.2085 17.3453C26.0744 17.3587 25.9403 17.3855 25.8062 17.4123C25.7794 17.2917 25.7392 17.1844 25.7123 17.0637C25.8464 17.0369 25.9805 17.0235 26.1012 16.9967H26.1146Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
390
|
+
<path d="M25.6713 14.5301C26.0065 15.2274 26.3148 16.0721 26.5562 16.9303C26.4087 16.9437 26.2612 16.9705 26.1137 16.9973C25.8589 16.1392 25.5505 15.2944 25.1885 14.6105C25.336 14.5837 25.4969 14.5569 25.6578 14.5301H25.6713Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
391
|
+
<path d="M26.1149 16.9975C25.9808 17.0109 25.8601 17.0377 25.726 17.0645C25.4176 15.965 25.1092 15.1471 24.9214 14.6778C25.0153 14.6643 25.1092 14.6375 25.2031 14.6241C25.5517 15.2946 25.8601 16.1393 26.1283 17.0109L26.1149 16.9975Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
392
|
+
<path d="M25.7256 17.0493C25.7525 17.1566 25.7927 17.2773 25.8195 17.3979C25.015 17.532 24.2641 17.6661 23.607 17.8002C23.5668 17.6795 23.5266 17.5589 23.4864 17.4516C24.2775 17.2907 25.0418 17.1566 25.7256 17.0493Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
393
|
+
<path d="M25.5245 14.2341C25.5781 14.3279 25.6184 14.4218 25.6721 14.5291C25.5112 14.5559 25.3502 14.5827 25.2027 14.6095C25.1491 14.5157 25.0954 14.4218 25.0418 14.3279C25.2027 14.2877 25.3636 14.2609 25.5245 14.2341Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
394
|
+
<path d="M23.4862 17.4524C23.3387 17.4792 23.1911 17.506 23.0436 17.5462C22.7889 16.8758 22.5207 16.2724 22.2659 15.8433C22.1854 15.7226 22.105 15.669 22.0514 15.669L22.6681 15.0388C22.6681 15.0388 22.8559 15.079 23.1643 15.012C23.5799 14.9181 24.1834 14.7974 24.8941 14.6633C25.0952 15.1326 25.4036 15.9506 25.6986 17.0501C25.0147 17.1574 24.2638 17.2915 23.4593 17.4524H23.4862Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
395
|
+
<path d="M25.0424 14.3281C25.0961 14.4219 25.1497 14.5158 25.2033 14.6097C25.1095 14.6231 25.0156 14.6365 24.9217 14.6633C24.8815 14.556 24.8413 14.4622 24.8011 14.3817C24.8815 14.3683 24.962 14.3415 25.0424 14.3281Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
396
|
+
<path d="M24.9359 14.1541C24.9359 14.1541 25.0164 14.2748 25.0432 14.3419C24.9628 14.3553 24.8823 14.3821 24.8019 14.3955C24.7482 14.2748 24.7214 14.2212 24.7214 14.2212C24.5605 13.9664 24.7616 13.886 24.9359 14.1676V14.1541Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
397
|
+
<path d="M24.8004 14.3807C24.8272 14.4478 24.8674 14.5416 24.921 14.6623C24.1969 14.7964 23.607 14.9171 23.1913 15.0109C22.8829 15.078 22.722 15.078 22.6952 15.0377C22.655 14.9975 22.7757 14.9171 22.9902 14.85C23.5802 14.6757 24.197 14.5148 24.8138 14.3807H24.8004Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
398
|
+
<path d="M23.4863 17.4528C23.5265 17.5601 23.5667 17.6808 23.6069 17.8015C23.4594 17.8283 23.3119 17.8551 23.1778 17.8953C23.1376 17.7746 23.0974 17.654 23.0572 17.5467C23.2047 17.5199 23.3521 17.493 23.4996 17.4528H23.4863Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
399
|
+
<path d="M23.178 17.895C23.3121 18.257 23.4194 18.6459 23.5266 19.0347C23.3791 18.9409 23.2183 18.8604 23.0708 18.78C22.9903 18.485 22.9098 18.2168 22.8293 17.962C22.9366 17.9352 23.0573 17.9084 23.178 17.895Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
400
|
+
<path d="M23.0571 17.5468C23.0974 17.6675 23.1376 17.7748 23.1778 17.8955C23.0571 17.9223 22.9498 17.9491 22.8291 17.9625C22.7889 17.8418 22.7487 17.7212 22.7219 17.6139C22.8292 17.5871 22.9499 17.5603 23.0571 17.5468Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
401
|
+
<path d="M22.2665 15.8434C22.5346 16.2725 22.8028 16.8625 23.0442 17.5463C22.9369 17.5732 22.8163 17.6 22.709 17.6134C22.3469 16.5139 22.052 15.897 22.052 15.897C21.9581 15.7496 21.9849 15.6691 22.052 15.6691C22.1056 15.6691 22.186 15.7227 22.2665 15.8434Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
402
|
+
<path d="M22.8297 17.9632C22.9101 18.218 22.9906 18.4862 23.0711 18.7812C22.9236 18.7007 22.7895 18.6337 22.642 18.5666C22.3336 18.4191 22.052 18.2984 21.7972 18.1912C22.0788 18.1241 22.4274 18.0437 22.8297 17.9632Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
403
|
+
<path d="M22.7231 17.6124C22.7633 17.7197 22.8035 17.8403 22.8303 17.961C22.4415 18.0415 22.0929 18.1219 21.7979 18.189C21.5833 18.0951 21.3956 18.0281 21.2213 17.9744C21.7174 17.8403 22.227 17.7331 22.7097 17.6258L22.7231 17.6124Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
404
|
+
<path d="M21.7983 18.1912C21.7983 18.1912 21.7714 18.1912 21.7446 18.1912C21.3692 18.0839 21.3692 18.0705 21.1949 17.9632C21.1949 17.9632 21.1949 17.9632 21.2083 17.9632C21.3826 18.0169 21.5703 18.0973 21.7849 18.1778L21.7983 18.1912Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
405
|
+
<path d="M34.8576 5.07605C34.8308 5.08946 34.7905 5.11628 34.7637 5.12969C34.7637 5.12969 28.6895 9.5278 23.8891 13.0007C20.8185 15.2266 18.2708 17.0636 18.2038 17.1038C17.7076 17.0502 17.3456 17.1574 16.9031 17.4927C16.2997 17.962 15.5353 18.552 15.5353 18.552L25.7261 25.6989L28.1129 27.375C28.1129 27.375 28.4079 26.7582 28.7967 25.8464C29.1856 24.9212 29.1856 24.653 28.9845 24.063C29.0783 23.7948 35.7425 5.86718 35.7425 5.86718C35.9437 5.31741 35.3671 4.82128 34.871 5.06264L34.8576 5.07605Z" fill="var(--sapContent_Illustrative_Color15)"/>
|
|
406
|
+
<path d="M27.1214 21.502C27.1214 21.502 27.242 21.502 27.2689 21.502C27.4968 21.4618 27.3493 21.1131 27.3627 20.5902C27.3627 20.4561 27.4834 20.3354 27.6041 20.3086C27.9661 20.2415 28.5293 20.1611 28.8378 20.1209C28.9584 20.1075 29.0388 20.0002 29.0388 19.8795C29.0254 19.6247 29.2534 18.0961 29.2534 18.0961C29.2534 18.0961 29.2534 18.0961 29.2802 18.0961C29.4545 18.0827 29.4813 17.9084 29.4679 17.7475C29.4545 17.4927 29.4277 17.305 29.4009 17.0502C29.3741 16.8089 29.3204 16.6882 29.5484 16.6346C29.7763 16.5809 30.4468 16.5407 30.8222 16.5273C30.9563 16.5273 31.0502 16.3932 31.0368 16.2725C30.943 15.4144 30.6614 13.9126 30.6882 13.9126C30.6882 13.9126 30.8625 13.3762 31.1977 14.7439C31.1977 14.7439 31.439 14.8244 31.3988 14.5025C31.3854 14.3014 31.3586 14.1539 31.3049 13.6042C31.3049 13.4969 31.372 13.403 31.4927 13.403C31.6268 13.403 31.8279 13.403 32.0156 13.3896C32.2838 13.3896 32.4984 13.1482 32.4582 12.8667C32.4179 12.5583 32.4581 10.8687 32.7397 11.861C32.7397 11.861 32.9677 11.9549 32.9274 11.633C32.9274 11.5526 32.8738 11.204 32.8872 11.1235C32.8872 10.7078 33.5174 10.7078 33.2358 9.62172C33.2358 9.58149 33.2358 9.23286 33.5845 9.27308C33.8929 9.31331 33.8393 9.08536 33.7991 8.92445C33.7454 8.65628 34.0806 8.66969 34.0806 8.66969C34.0806 8.66969 34.322 8.80377 34.1879 8.21378C34.0538 7.61038 34.0672 7.3288 34.1879 7.12767C34.4695 6.67176 34.8583 6.04155 35.0461 5.78678C35.3411 5.38451 35.1399 4.99565 34.8315 5.10293C35.3276 4.86157 35.9176 5.34429 35.7031 5.90746C35.7031 5.90746 29.0388 23.8351 28.945 24.1033C29.1461 24.6933 29.1462 24.9749 28.7573 25.8867C28.3684 26.7985 28.0734 27.4153 28.0734 27.4153L25.6866 25.7392C27.47 23.5804 27.2019 22.5747 26.4778 21.797C24.6005 19.732 21.5969 18.3107 20.3231 17.962C19.8001 17.8279 21.1812 17.9889 21.1678 17.9889C21.3287 18.0961 22.8842 18.7129 23.0317 18.7934C23.1792 18.8738 25.6866 20.5231 25.6866 20.5231L27.0812 21.4886V21.5154L27.1214 21.502Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
407
|
+
<path d="M21.2078 17.9748C25.4584 17.7066 29.3068 15.3466 31.4924 11.6726L34.2144 7.10019L34.7776 7.54268L28.4218 23.6736L26.6384 21.3941L25.7266 20.4822L21.2212 17.948L21.2078 17.9748Z" fill="var(--sapContent_Illustrative_Color16)"/>
|
|
408
|
+
<path d="M42.3535 28.0579C40.7847 28.1786 35.7966 28.6211 32.0019 28.9563C28.8374 27.6959 23.7286 27.1059 17.9494 27.1059C8.34867 27.1059 11.3522 28.8758 11.3522 32.5499C11.3522 35.0976 14.5971 39.4286 14.2887 37.9671C14.5971 38.0341 17.413 38.9057 18.3114 38.9057C27.6842 38.9057 34.9519 36.1971 35.3005 32.6437C38.3577 31.1688 43.3726 28.7686 43.8017 28.5942C44.7269 28.2322 43.9492 27.9104 42.3535 28.0445V28.0579Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
409
|
+
<path d="M29.5886 33.1692C29.5886 33.6386 29.4679 34.1615 29.24 34.671C29.7629 32.0161 27.4968 31.1981 26.3973 31.0506C25.6062 30.9836 28.0063 30.7288 28.4488 28.2616C28.3952 29.0929 28.2075 29.8975 27.9259 30.6618C28.9182 31.1445 29.5886 32.0831 29.5886 33.1692Z" fill="var(--sapContent_Illustrative_Color21)"/>
|
|
410
|
+
<path d="M26.3964 31.0497C27.496 31.1972 29.7621 32.0286 29.2391 34.6701C28.7028 35.9037 27.5094 37.1373 25.6456 37.7273C23.004 38.5587 20.0138 38.8537 17.3455 38.7464V38.7196C18.445 38.7598 19.4104 38.6257 19.7725 38.4782C21.462 37.8078 20.4563 36.1049 19.0484 35.9976C15.2269 35.6892 14.0066 35.1126 14.9586 35.1528C16.6482 35.2065 18.8875 34.9651 20.1345 34.1472C21.3816 33.3292 21.167 31.6665 19.8261 31.6397C18.0293 31.5995 17.5868 31.9615 18.5925 31.157C23.4063 27.3086 21.2743 18.8208 16.6214 18.2442C18.3512 18.3515 20.5368 18.9415 22.186 19.8801C25.1762 21.5696 27.925 24.6805 28.3944 26.7186C28.4614 27.0405 28.448 27.3623 28.448 27.6975C28.448 27.8852 28.448 28.0595 28.4346 28.2473C28.0055 30.7145 25.5919 30.9693 26.383 31.0363L26.3964 31.0497Z" fill="var(--sapContent_Illustrative_Color24)"/>
|
|
411
|
+
<path d="M9.8233 35.999C9.8233 35.999 9.91771 36.026 9.95819 36.0395C9.95819 36.0125 9.95819 35.9855 9.95819 35.9585C9.91771 35.972 9.8772 35.9855 9.83673 35.999H9.8233Z" fill="var(--sapContent_Illustrative_Color8)"/>
|
|
412
|
+
<path d="M14.9586 35.1662C16.6481 35.2198 18.8875 34.9918 20.1345 34.1739C21.3815 33.356 21.1669 31.6933 19.826 31.653C18.0292 31.6128 17.5868 31.9749 18.5924 31.1703C20.4965 29.6417 21.3145 27.389 21.3145 25.19C21.3145 21.8377 19.4238 18.6062 16.6079 18.2576C16.152 18.2308 15.7364 18.2442 15.3609 18.2844C10.6142 18.8207 6.94009 22.1998 6.24283 26.3029L5.89427 27.8449C4.75452 28.1935 3.97677 29.1054 3.68177 30.5535C2.24703 30.7815 1 31.881 1 33.5437C1 35.2064 4.75446 35.8098 5.74671 36.078C4.99581 36.2925 4.47285 36.6277 4.47285 37.1507C4.47285 38.0491 5.49198 38.6793 7.54354 38.9206C7.70444 38.9341 7.89219 38.9609 8.0665 38.9743C10.3728 39.1486 11.2712 38.4111 11.365 37.5395C12.7059 38.2368 14.8916 38.6793 17.3454 38.7731V38.7463C18.4449 38.8 19.4104 38.6659 19.7724 38.505C21.4619 37.8345 20.4563 36.1316 19.0484 36.0243C15.2268 35.7159 14.0066 35.1393 14.9586 35.1796V35.1662ZM7.16805 32.0419C7.16805 32.0419 7.10101 32.0419 7.0876 32.0285C7.06078 32.0017 7.04743 31.9748 7.06084 31.9346L7.34237 31.9749C7.34237 31.9749 7.2217 32.0151 7.18147 32.0419H7.16805Z" fill="var(--sapContent_Illustrative_Color25)"/>
|
|
413
|
+
</svg>
|
|
414
|
+
|
|
415
|
+
<figcaption class="fd-illustrated-message__figcaption">
|
|
416
|
+
<h2 class="fd-illustrated-message__title" id="title-base">Delivery Delay</h2>
|
|
417
|
+
<p class="fd-illustrated-message__text">A broken cooling system resulted in melted ice cream in transit. Another delivery is already on the way.</p>
|
|
418
|
+
</figcaption>
|
|
419
|
+
|
|
420
|
+
<div class="fd-illustrated-message__actions">
|
|
421
|
+
<button type="button" class="fd-button" aria-label="Contact Delivery Company">Contact Us</button>
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
</figure>
|
|
425
|
+
</section>
|
|
426
|
+
```
|
|
427
|
+
|
|
428
|
+
## Accessibility
|
|
429
|
+
|
|
430
|
+
- Use semantic HTML elements where appropriate
|
|
431
|
+
- Include proper ARIA attributes for interactive elements
|
|
432
|
+
- Ensure keyboard navigation support
|
|
433
|
+
- Provide adequate color contrast
|
|
434
|
+
|
|
435
|
+
## Source
|
|
436
|
+
|
|
437
|
+
This documentation was automatically generated from: `packages/styles/stories/Components/illustrated-message/illustrated-message.stories.js`
|
|
438
|
+
|
|
439
|
+
For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).
|