This page demonstrates the various custom components and styles defined in src/css/custom.css.

Typography & Fonts​

The primary font used is SAP 72.

H1 Heading using SAP 72

H2 Heading using SAP 72

H3 Heading using SAP 72

H4 Heading using SAP 72

H5 Heading using SAP 72

H6 Heading using SAP 72

This is a standard paragraph using the base font size and SAP 72.

This is inline code style.

UI5 Web Components Icons​

These are the recommended way to use icons.

Connected   Documents   Hide   Filter  

Layout Components​

Hero Header​

Section Title​

A Catchy Section Title

Section with Background​

Navigation & Lists​

Breadcrumbs​

Steps List​

1. First step in the process.
2. Second step, which might be longer and wrap to the next line.
3. Final step.

General List Buttons​

• Normal Button Link
• Disabled Button Link

Feature Buttons​

Tabs​

Standard Tabs​

Tabs with Background​

def hello(name):
    print(f"Hello, {name}!")

function hello(name) {
  console.log(`Hello, ${name}!`);
}

Content Specific Styles​

Headings with Step Numbers​

(Used in conjunction with Table of Contents)

1First Major Section

Content for the first section...

2Second Major Section

Content for the second section...

Table of Contents Link Styling​

(Simulated structure, actual TOC is generated)