<p><div> <div><strong>Morning Horizon</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header/media1_1e520168918cfbf12af8a84030ab6a22e4ed82020.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e520168918cfbf12af8a84030ab6a22e4ed82020.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e520168918cfbf12af8a84030ab6a22e4ed82020.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/tool-header/media%5C_1e520168918cfbf12af8a84030ab6a22e4ed82020.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header/media_1e520168918cfbf12af8a84030ab6a22e4ed82020.png?width=750&format=png&optimize=medium</a>" width="3422" height="1182"> </picture> </div> </div> <div> <div><strong>Evening Horizon</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header/media1_1bc9071960e4469a7687e766652697bd5a0a886bc.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bc9071960e4469a7687e766652697bd5a0a886bc.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bc9071960e4469a7687e766652697bd5a0a886bc.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/tool-header/media%5C_1bc9071960e4469a7687e766652697bd5a0a886bc.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header/media_1bc9071960e4469a7687e766652697bd5a0a886bc.png?width=750&format=png&optimize=medium</a>" width="3422" height="1182"> </picture> </div> </div> <div> <div><strong>Horizon HCB</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header/media1_1a5dde4c02200be96e6668de5e84c057483a0dfd7.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1a5dde4c02200be96e6668de5e84c057483a0dfd7.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1a5dde4c02200be96e6668de5e84c057483a0dfd7.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/tool-header/media%5C_1a5dde4c02200be96e6668de5e84c057483a0dfd7.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header/media_1a5dde4c02200be96e6668de5e84c057483a0dfd7.png?width=750&format=png&optimize=medium</a>" width="3422" height="1182"> </picture> </div> </div> <div> <div><strong>Horizon HCW</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header/media1_12a6e208b6d09703e92cbdc176b53926b7860ef45.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_12a6e208b6d09703e92cbdc176b53926b7860ef45.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_12a6e208b6d09703e92cbdc176b53926b7860ef45.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/tool-header/media%5C_12a6e208b6d09703e92cbdc176b53926b7860ef45.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header/media_12a6e208b6d09703e92cbdc176b53926b7860ef45.png?width=750&format=png&optimize=medium</a>" width="3422" height="1182"> </picture> </div> </div></p>

<div> <div></div> <div>Element</div> <div>Usage</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Tool Header Container</strong></div> <div><strong><div class="content-wrapper"><p><span class="status-macro aui-lozenge conf-macro output-inline" data-hasbody="false" data-macro-name="status">REQUIRED</span></p></div></strong></div> <div>The Tool Header Container is a responsive area that holds all Tool Header UI elements.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Menu Button</strong></div> <div><strong><br></strong></div> <div>The Menu Button is an optional over-styled button that toggles the visibility of the vertical navigation. See the Tool Header Button in <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTool%2BHeader%2BButton">Tool Header Button</a> for full specifications.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Logo</strong></div> <div><strong><div class="content-wrapper"><p><span class="status-macro aui-lozenge conf-macro output-inline" data-hasbody="false" data-macro-name="status">REQUIRED</span></p></div></strong></div> <div>The logo is the logo of the company using the tool. Use the SAP logo as a default.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Product Name</strong></div> <div><strong><div class="content-wrapper"><p><span class="status-macro aui-lozenge conf-macro output-inline" data-hasbody="false" data-macro-name="status">REQUIRED</span></p></div></strong></div> <div>The Product Name is the official name of the tool. Omit the SAP prefix in front of it.</div> </div> <div> <div><strong>E</strong></div> <div><strong>Second Title</strong></div> <div><strong><br></strong></div> <div>The Second Title is an optional second text identifier of the tool.</div> </div> <div> <div><strong>F</strong></div> <div><strong>Search</strong></div> <div><strong><br></strong></div> <div>The Search is an area that holds either a global search component. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTool%2BHeader%2BSearch">Tool Header Search</a> for full specifications.</div> </div> <div> <div><strong>G</strong></div> <div><strong>Product Actions</strong></div> <div><strong><br></strong></div> <div>The Custom Actions Area is an area that holds custom actions for the tool. See the Tool Header Button in <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTool%2BHeader%2BButton">Tool Header Button</a> for full specifications.</div> </div> <div> <div><strong>H</strong></div> <div><strong>Separator</strong></div> <div><strong><br></strong></div> <div>The Separator is an optional separator to space the different action areas.</div> </div> <div> <div><strong>I</strong></div> <div><strong>User Avatar</strong></div> <div><strong><div class="content-wrapper"><p><span class="status-macro aui-lozenge conf-macro output-inline" data-hasbody="false" data-macro-name="status">REQUIRED</span></p></div></strong></div> <div>The User Avatar is a mandatory UI element that displays a personalized user profile picture or initials. Over style of the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912516">Avatar (Horizon)</a>.</div> </div> <div> <div><strong>J</strong></div> <div><strong>Product Switch</strong></div> <div><strong><div class="content-wrapper"></div></strong></div> <div>The Product Switch is an optional button that triggers switching between products. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2135951135">Product Switch (Fiori 3)</a> for full specifications.</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><strong>A</strong></div> <div><strong>Tool Header Container</strong></div> <div> <p>width: 100%;<br>height: auto;<br>min-height: 3.25rem;<br>background: var(--sapShellColor);<br>border: var(–sapContent_Transparent_Border);<br>border-radius: 0.5rem;<br>box-shadow: var(--sapContainer_Shadow1);</p> <p><strong>With Menu Button</strong><br>padding: 0.625rem 1.25rem 0.625rem 0.75rem;</p> <p><strong>Without Menu Button</strong><br>padding: 0.625rem 1.25rem 0.625rem 1.5rem;</p> </div> </div> <div> <div><strong>A1</strong></div> <div><strong>Area Spacing</strong></div> <div>spacing: 0.75rem;</div> </div> <div> <div><strong>A2</strong></div> <div><strong>In-Area Spacing</strong></div> <div>spacing: 0.375rem;</div> </div> <div> <div><strong>H</strong></div> <div><strong>Separator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p>background: transparent;</p> </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><strong>C</strong></div> <div><strong>Logo</strong></div> <div> <p>width: auto;<br>height: 1.625rem;</p> <p><strong>Hover State</strong><br>cursor: hand;</p> <p><strong>Focused State</strong><br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);<br>outline-offset: 0.125rem;<br>border-radius: 0.25rem;</p> </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><strong>D</strong></div> <div><strong>Product Name</strong></div> <div> <p>font-family: var(--sapFontBlackFamily);<br>font-size: 1.125rem;<br>line-height: 1.625rem;<br>color: var(–sapShell_GroupTitleTextColor);</p> <p>vertical-align: baseline;</p> </div> </div> <div> <div><strong>E</strong></div> <div><strong>Second Title</strong></div> <div> <p>font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSize);<br>line-height: var(--sapContent_LineHeight);<br>color: var(–sapContent_LabelColor);</p> <p>vertical-align: baseline;</p> </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><strong>I</strong></div> <div><strong>Avatar</strong></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></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong>A</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Tool Header Container</span></strong></div> <div>min-height: 3.75rem;</div> </div> <div> <div><strong>C</strong></div> <div><strong>Logo</strong></div> <div>No deltas.</div> </div> <div> <div><strong>D</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Product Name</span></strong></div> <div>No deltas.</div> </div> <div> <div><strong>E</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Second Title</span></strong></div> <div>No deltas. // not displayed on tablets</div> </div> <div> <div><strong>H</strong></div> <div><strong>Separator</strong></div> <div>No deltas. // not displayed on tablet portrait orientation</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><strong>A</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Tool Header Container</span></strong></div> <div>No deltas.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Logo</strong></div> <div>No deltas.</div> </div> <div> <div><strong>D</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Product Name</span></strong></div> <div>No deltas. // not displayed on phones</div> </div> <div> <div><strong>E</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Second Title</span></strong></div> <div>No deltas. // not displayed on phones</div> </div> <div> <div><strong>H</strong></div> <div><strong>Separator</strong></div> <div>No deltas. // not displayed on phones</div> </div>