<a href="/wiki/pages/viewpage.action?pageId=2629616739">Content Section Title (Quartz)</a>

FIORITECHP1-21771 - Getting issue details... STATUS

Overview

Content Section Titles are intended to organize the information flow on a page. Their primary purpose is to provide context via a short meaningful title to the information below them. Typical usages of content section titles are to label forms, tables, card groups, lists of settings, etc.

Anatomy

Content Section Title Variants

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div>A</div> <div>Toolbar</div> <div>Standard Toolbar for the main container. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200408">Toolbar (Fiori 3)</a> for full specification.</div> </div> <div> <div>B1</div> <div>Content Section Title</div> <div>The title of content sections.</div> </div> <div> <div>B2</div> <div>Subtitle</div> <div>Standard Label control. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">Label (Fiori 3)</a> for full specification.</div> </div> <div> <div>B3</div> <div>Info Icon</div> <div>Standard icon control. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2058533062">IconControl (Fiori 3)</a> for full specification</div> </div> <div> <div>B4</div> <div>Info Popover</div> <div>Standard Popover. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2033136679">ResponsivePopover (Fiori 3)</a> for full specification.</div> </div> <div> <div>C1</div> <div>Action Buttons</div> <div>Standard transparent Buttons. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257">Button (Fiori 3)</a> for full specification.</div> </div>

Content Section Title and View Switching

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div>C2</div> <div>Segmented Button</div> <div>Standard Segmented Button. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025061678">SegmentedButton (Fiori 3)</a> for full specification.</div> </div> <div> <div>C3</div> <div>Select</div> <div>Standard Select. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2051306683">Select (Fiori 3)</a> for full specification.</div> </div>

Desktop Specification

The following specification describes the deltas in the Title control. See Toolbar (Fiori 3) - Title Toolbar for full specification.

<div> <div></div> <div>Element</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div>A</div> <div>Toolbar</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2Fvisualcore%2FToolbar%2B%2528Fiori%2B3%2529%2B-%2BTitle%2BToolbar">Toolbar (Fiori 3) - Title Toolbar</a> for full specification</div> </div> <div> <div>A1</div> <div>Toolbar Padding</div> <div>padding: 0 0.5rem 0 1rem;</div> </div> <div> <div>A2</div> <div>Toolbar Spacer</div> <div>min-width: 2rem;</div> </div> <div> <div>B1</div> <div>Content Section Title</div> <div> <p>title-level: H5; ← Title Control</p> <p><strong>Overstyle</strong></p> <p>font-family: sapFontBoldFamily;<br>font-size: --sapFontHeader5Size;<br>font-weight: bold;<br>color: --sapGroup_TitleTextColor;</p> </div> </div> <div> <div>B2</div> <div>Subtitle</div> <div>font-size: --sapFontSmallSize;<br>margin-top: 0.1875rem;</div> </div> <div> <div>B3</div> <div>Info Icon</div> <div> <p>font-size: --sapFontSmallSize;<br>margin-left: 0.25rem;<br>color: --sapNeutralTextColor;</p> <p>icon: sap-icon://information (unicode: xe289)</p> </div> </div> <div> <div>B4</div> <div>Popover</div> <div><em>No overstyle</em></div> </div> <div> <div>C1</div> <div>Buttons</div> <div><em>No overstyle</em></div> </div> <div> <div>C2</div> <div>Segmented Button</div> <div><em>No overstyle</em></div> </div> <div> <div>C3</div> <div>Select</div> <div><em>No overstyle</em></div> </div>

Tablet Specification

No delta from the desktop specification, except that the controls are rendered in Cozy mode.

Phone Specification

This specification defines just the delts from desktop and tablet specifications.

<div> <div></div> <div>Element</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div>B4</div> <div>Popover</div> <div>Opens as a dialog. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2033136679">ResponsivePopover (Fiori 3)</a> for full specification.</div> </div> <div> <div>C1</div> <div>Buttons</div> <div>If spacer size reaches min-width → trigger overflow.</div> </div> <div> <div>C2</div> <div>Segmented Button</div> <div> <p>Replace Title with Select.<br>Title Text becomes - Title - View Name</p> <p>If spacer size reaches min-width → trigger overflow.</p> </div> </div> <div> <div>C3</div> <div>Select</div> <div> <p>Replace Title with Select.<br>Title Text becomes - Title - View Name</p> <p>If spacer size reaches min-width → trigger overflow.</p> </div> </div>