<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/notifications/media1_1c803d1b5272d6746f647b346cfe7e27b565d8772.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c803d1b5272d6746f647b346cfe7e27b565d8772.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c803d1b5272d6746f647b346cfe7e27b565d8772.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/notifications/media%5C_1c803d1b5272d6746f647b346cfe7e27b565d8772.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/notifications/media_1c803d1b5272d6746f647b346cfe7e27b565d8772.png?width=750&format=png&optimize=medium</a>" width="1600" height="1256"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/notifications/media1_123ec7c44a6de378b01e1cc4c45e85931684f9328.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_123ec7c44a6de378b01e1cc4c45e85931684f9328.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_123ec7c44a6de378b01e1cc4c45e85931684f9328.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/notifications/media%5C_123ec7c44a6de378b01e1cc4c45e85931684f9328.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/notifications/media_123ec7c44a6de378b01e1cc4c45e85931684f9328.png?width=750&format=png&optimize=medium</a>" width="1600" height="1256"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/notifications/media1_11f845f8a50b9a9e7e570f093c3855fb5f96131ef.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_11f845f8a50b9a9e7e570f093c3855fb5f96131ef.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_11f845f8a50b9a9e7e570f093c3855fb5f96131ef.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/notifications/media%5C_11f845f8a50b9a9e7e570f093c3855fb5f96131ef.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/notifications/media_11f845f8a50b9a9e7e570f093c3855fb5f96131ef.png?width=750&format=png&optimize=medium</a>" width="1600" height="1256"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/notifications/media1_1fa14d8047d955dc939c7f0ee6cedc8dbf29c2348.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1fa14d8047d955dc939c7f0ee6cedc8dbf29c2348.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1fa14d8047d955dc939c7f0ee6cedc8dbf29c2348.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/notifications/media%5C_1fa14d8047d955dc939c7f0ee6cedc8dbf29c2348.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/notifications/media_1fa14d8047d955dc939c7f0ee6cedc8dbf29c2348.png?width=750&format=png&optimize=medium</a>" width="1600" height="1256"> </picture> </div> </div></p>

<div> <div></div> <div>Component</div> <div>Value</div> </div> <div> <div>A</div> <div>Popover Header</div> <div>This is the container for all notification items and groups. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus">Navigation Menus</a> for full specifications.</div> </div> <div> <div>B</div> <div>Group Item</div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation">Vertical Navigation</a></div> </div> <div> <div>C</div> <div>Notification Item</div> <div>See below</div> </div> <div> <div>D</div> <div>Group spacer</div> <div>height: 1.5rem</div> </div> <div> <div>E</div> <div>Footer</div> <div>Horizontally centered button</div> </div>

<div> <div><strong><p>Morning Horizon</p></strong></div> <div>box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor, 48), 0 1rem 2rem 0 fade(@sapContent_ShadowColor, 16);</div> </div> <div> <div><strong>Evening Horizon</strong></div> <div>box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor, 48), 0 1rem 2rem 0 fade(@sapContent_ShadowColor, 64);</div> </div> <div> <div><strong>Horizon HCB</strong></div> <div>box-shadow: 0 0 0 0.0625rem @sapContent_ShadowColor, 0 1rem 2rem 0 fade(@sapContent_ShadowColor, 16);</div> </div> <div> <div><strong>Horizon HCW</strong></div> <div>box-shadow: 0 0 0 0.0625rem @sapContent_ShadowColor, 0 1rem 2rem 0 fade(@sapContent_ShadowColor, 16);</div> </div>

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div>A</div> <div>Notification Item</div> <div> <p>padding: 0.75rem 1.5rem 0.75rem 1rem<br>background: var(–sapList_Background)<br>border-radius: var(--sapElement_BorderCornerRadius)</p> <p><strong>Normal State</strong><br>background: var(--sapList_Background)<br>transition: background-color 0.3s ease-in-out;</p> <p><strong>Hover State</strong><br>background: var(--sapList_Hover_Background)</p> <p><strong>Active State</strong><br>background: var(--sapList_Active_Background)</p> <p><strong>Focused</strong><br>background: var(--sapList_Background);<br>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</p> </div> <div><strong>All states</strong><br>border: 0.0625rem solid var(--sapGroup_ContentBorderColor)</div> </div> <div> <div>B</div> <div>Spacing</div> <div>0.75rem</div> </div> <div> <div>C</div> <div>Avatar</div> <div> <p>width: 2.5rem;<br>height: 2.5rem;</p> <p><strong>Initials</strong><br>font-size: 1rem;</p> <p><strong>Icon</strong><br>width: 1.25rem;<br>height: 1.25rem;</p> </div> </div> <div> <div>D</div> <div>Unread Indicator</div> <div> <p>Absolutely positioned middle right.</p> <p>size: 0.5rem;<br>background: var(--sapHighlightColor);<br>right: 0.5rem<br>vertically centered</p> </div> <div>background: var(--sapContent_IconColor);</div> </div> <div> <div>E</div> <div>Title</div> <div> <p>font-size: var(--sapFontHeader6Size);<br>font-family: var(--sapFontSemiboldFamily);<br>line-height: 1.25rem;<br>color: var(--sapTitleColor);<br>margin-bottom: 0.5rem;</p> <p>Title truncation</p> <p>The title truncates on the second line</p> </div> </div> <div> <div>F</div> <div>Timestamp</div> <div>font-size: var(--sapFontSmallSize);<br>font-family: var(--sapFontFamily);<br>color: var(--sapContent_LabelColor);</div> </div> <div> <div>G</div> <div>Description</div> <div> <p>font-size: var(--sapFontSmallSize);<br>font-family: var(--sapFontFamily);<br>color: var(--sapTextColor);<br>margin-bottom: 0.5rem;</p> <p>Text truncation</p> <p>The description truncates on the second line</p> </div> </div>

<div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div>Popover</div> <div> <p><strong>Container</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus">Navigation Menus</a> for specifications.<br>min-width: 20rem;<br>max-width: 24rem;</p> <p><strong>Header</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTitle%2BBar">Title Bar</a> for full specifications.<br>For the title text use <strong>Level 5</strong> from <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTypography">Typography</a> specification.</p> </div> </div> <div> <div>Spacing</div> <div> <p>Spacing between items: 0.125rem</p> <p>Each group has bottom padding of 1.5rem.</p> </div> </div>

<div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div>Group Item</div> <div> <p>Inherits the design and behavior from the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation">(Group Item) Vertical Navigation</a>, but has some deviations that are listed below:</p> <p>padding-left: 0.75rem;<br>padding-right: 0.75rem;</p> </div> </div>