SAP Fiori Fundamentals
v1.5.4-rc.1 GitHub Support
  • Submit an issue
  • Email Us
    • getting started

    • foundation
      • Colors
      • Grid
      • Spacing
      • Type

    • layouts
      • Application Shell
      • Page
      • Section
      • Panel
      • Columns

    • components
      • Action Bar
      • Alert
      • Button
      • Breadcrumb
      • Calendar
      • Combobox Input
      • Contextual Menu
      • Date Picker
      • Dropdown
      • Forms
      • Identifier
      • Icon
      • Image
      • Input Group
      • Inline Help
      • List Group
      • Link
      • Loading Spinner
      • Localization Editor
      • Mega Menu
      • Menu
      • Modal
      • Multi Input
      • Pagination
      • Popover
      • Search Input
      • Shellbar
      • Side Navigation
      • Status Indicators
      • Table
      • Tabs
      • Tile
      • Tile Grid
      • Time
      • Time Picker
      • Token
      • Toggle
      • Tree

    • resources
      • How to use SCSS
      • Design System Utilities
      • UI Kit
      • SAP Fiori Fundamentals Implementation Libraries
      • Office Hours

    Layouts

    Layouts in Fiori Fundamentals are for structuring the main parts of your application. Organized in three main categories


    Shell Layout

    Main shell and application template structure, including header, navigation, main content, footer.

    Page Layout

    Elements to structure the content your application page.

    Section

    Wrapper element for dividing a page into different sections

    Grid

    Elements to construct complex layouts.

    Panel

    Elements to organize components.

    Global Nav

    Global Navigation to switch between different Apps

    Have a question? Email us. © Copyright SAP 2019