<a href="/wiki/display/CPDesign/Title+Bar">Title Bar</a>

Table of Contents

Look and Feel

Anatomy

Title Bar is a composite control that uses a toolbar as a container and a title for labeling. It varies from the standard title control in its bold visual state and text size. In addition, the title bar comes in three variants:

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div></div> <div>Container</div> <div>padding: 0.375rem 0.75rem<br>spacing between sections - 0.75rem</div> </div> <div> <div>A</div> <div>Back button</div> <div>For the complete visual specification, please refer to the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%23Buttons-NestedButton">Nested Button</a><br>margin-right: 0.125rem;</div> </div> <div> <div>B</div> <div>Title</div> <div>The Title truncates on the first line<br>Use <strong>Level 4</strong> from the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTypography">Typography</a> specification.</div> </div> <div> <div>C</div> <div>Info Button</div> <div> <p>For the complete visual specification, please refer to the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%23Buttons-NestedButton">Nested Button</a>.</p> <p>The Info button opens a tooltip on click. For complete visual design specification of the tooltip, please refer to the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915260">Slider (Horizon)</a></p> </div> </div> <div> <div>D</div> <div>Subtitle</div> <div> <p>The optional subtitle truncates on the first line.<br>The subtitle inherits the visual styles of <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914064%26src%3Dsidebar">Label (Horizon)</a></p> <p>The subtitle has a top margin of <strong>0.125rem;</strong></p> </div> </div> <div> <div>E</div> <div>Middle Section</div> <div> <p>The Middle Section can be used for various components depending on the usecase.</p> <ul> <li>For switching views <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912701%26src%3Dsidebar">SegmentedButton (Horizon)</a> or <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915140">Select (Horizon)</a> depending on the views.<br>1-3 views - <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912701%26src%3Dsidebar">SegmentedButton (Horizon)</a><br>3 views and more - <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915140">Select (Horizon)</a></li> <li>GenerativeAI - <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FAI%2BPrompt">AI Prompt</a></li> <li>Menu Buttons when used in the context of the Application Toolbar</li> </ul> </div> </div> <div> <div>F</div> <div>Actions</div> <div>The actions are placed inside a toolbar. Please refer to the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915944">Toolbar (Horizon)</a> spec.</div> </div>

Responsiveness

<div> <div></div> <div></div> <div>More than 1024</div> <div>From 600-1024</div> <div>320-600</div> </div> <div> <div><strong>A</strong></div> <div><strong>Section Title</strong></div> <div>Spreads across the remaining space</div> <div>Spreads across the remaining space</div> <div>Spreads across the remaining space</div> </div> <div> <div><strong>B</strong></div> <div><strong>Middle Section</strong></div> <div>The width depends on the content<br>Always centered</div> <div>The width depends on the content.</div> <div>Both containers are combined in one. The contents go into an overflow</div> </div> <div> <div><strong>C</strong></div> <div><strong>Actions</strong></div> <div>Spread across the remaining space. Has the highest priority</div> <div>The width depends on the content</div> </div>