Titles
3 examples from SAP's documentation · no stylesheet in the package · Back to the gallery
About
Page Title, Section Title, and Subsection Title can be used as building blocks for home pages. These elements follow a responsive spacing system for horizontal padding, which can be disabled using the .no-inline-padding modifier class. Typically, there is only one Page Title (optional), displayed in the content area above the group name. The top padding of a Section Title varies depending on whether a Page Title is present. Additionally, the vertical padding of a Section Title depends on its position — whether it is the first Section Title on the page or situated between sections. Subsection Title has no padding-top, but if there's no Section Title, than Subsection Title adds 1rem padding-top.
Page Title, Section Title and Subsection Title
The first Section Title under the Page Title has a 0.5rem top padding. Between sections, the top padding is 3rem for XL, L, and M screens, and 2rem for S screens.NOTE: The background color for the titles is added for illustration purposes.
Section Title and Subsection Title (no Page Title)
When there is no Page Title, the first Section Title has a top padding of 1.5rem. The padding between sections remains the same: 3rem for XL, L, and M screens, and 2rem for S screens. NOTE: The background color for the titles is added for illustration purposes.
NoInlinePadding
To disable the responsive horizontal (inline) paddings add .no-inline-padding on the title element.