Skip to search Skip to content
  • Home
  • Get Started
    • Why Design Guidelines?
    • Navigating the Guidelines
    • Best Practices for Designing SAP Fiori Apps
  • Explore SAP Fiori
  • What’s New
  • SAP Fiori Design System
    • Overview
    • Design Principles
    • Design-Led Development
    • Accessibility
    • Multi-Device Support
    • Responsive Spacing
  • Look, Feel, and Wording
    • Overview
    • Design Tokens
    • Theming
    • Colors
      • Morning Horizon
      • Evening Horizon
      • Quartz Light
      • Quartz Dark
      • Belize
    • Iconography
      • Horizon
      • Quartz
    • Motion Design
    • Typography
      • Horizon
      • Quartz
    • UX Illustrations
    • UI Texts and In-App Help
      • UI Text Guidelines for SAP Fiori
      • Overview Page – UI Text Guidelines
      • Situation Handling Framework – UI Text Guidelines
      • SAP Companion
  • SAP Fiori Launchpad
    • Overview
    • Shell Bar
      • Overview
      • Enterprise Search
      • Notifications
      • Services
    • Home Page
    • Spaces
    • My Home
    • App Finder
    • Tile
  • General Patterns
    • Overview
    • Action Placement
    • Busy States
    • Collaboration
    • Content Density (Cozy & Compact)
    • Drafts
    • Empty States
    • Export to Spreadsheet
    • Flag and Favorite
    • Form Field Validation
    • Formatting
      • Overview
      • Dates
      • Numbers
      • Time
      • Units of Measurement
    • Forward
    • Intelligent Systems
      • Overview
      • Explainable AI
      • Matching
      • Ranking
      • Recommendations
      • Situation Handling
      • User Feedback
    • Navigation
    • Message Handling
      • Overview
      • Processing Multiple Items
    • Mobile Integration
    • Object Handling (Create, Edit, Delete)
      • Overview
      • Simple Objects (Create, Edit)
      • Complex Objects – Global Flow (Create, Edit)
      • Complex Objects – Local Flow (Create, Edit)
      • Copy
      • Create with Reference
      • Partial Edit
      • Mass Edit
      • Delete
    • Placeholder Loading
  • Layouts and Floorplans
    • Overview
    • When to Use Which Floorplan
    • Layouts
      • Comparison Pattern
      • Dynamic Page
      • Semantic Page
      • Flexible Column Layout
      • Letterboxing
      • Multi Instance
    • Floorplans
      • Analytical List Page
      • Initial Page
      • List Report
      • Object Page
      • Overview Page
      • Wizard
      • Worklist
  • UI Elements
    • Overview
    • When to Use
      • Semantic Colors
      • Tooltips
      • Which Selection Control?
      • Which UI Element State?
      • Wrapping and Truncation
    • Action / Navigation
      • Action Sheet
      • Breadcrumb
      • Button
      • Icon Tab Bar
      • Link
      • Smart Link
    • Collaboration
      • Feed and Notes
      • Group Feed Component
      • Timeline
    • Data Visualization
      • 3D Viewport
      • Analytical Card
      • Calendar Card
      • Chart (VizFrame)
      • Gantt Chart
      • Interactive Chart
      • Map
      • Micro Chart
      • Micro Process Flow
      • Network Graph
      • Process Flow
      • Status Indicator
      • Timeline
    • Dialog / Popover
      • Dialog
      • Message Box
      • Select Dialog
      • Table Select Dialog
      • Value Help Dialog
      • ———————————–
      • Popover
      • Quick View
    • Display
      • Avatar
      • Avatar Group
      • Carousel
      • Currency
      • Expandable Text
      • Formatted Text
      • Generic Tag
      • HTML
      • Image
      • Infobar
      • Label
      • Lightbox
      • Object Display Components
      • PDF Viewer
      • Progress Indicator
      • Status Indicator
      • T Account
      • Text
      • Tile
      • Title
      • Token
    • Filter
      • Filter Bar
      • Icon Tab Bar
      • Infobar
      • Smart Filter Bar
      • Token
      • Visual Filter Bar
      • Views
        (Variant Management)
    • Form / Layout / Container
      • Card
      • Carousel
      • Dynamic Side Content
      • Flexible Grid
      • Form / Simple Form
      • Icon Tab Bar
      • Panel
      • Scroll Container
      • Side Panel
      • Smart Form
    • Loading / Processing
      • Busy Dialog
      • Busy Indicator
      • Busy State
    • Messaging
      • Illustrated Message
      • Message Box
      • Message Page
      • Message Popover
      • Message Strip
      • Message Toast
      • Message View
    • Table / List / Tree
      • Overview
      • ———————————–
      • Analytical Table (ALV)
      • Grid Table
      • Responsive Table
      • Smart Table
      • Tree Table
      • ———————————–
      • Table Personalization
      • ———————————–
      • Grid List
      • List
      • Smart List
      • Tree
    • Toolbar
      • Overview
      • Chart Toolbar
      • Footer Toolbar
      • Header Toolbar
      • Table Toolbar
      • Tree Toolbar
    • User Input
      • Input Field
      • Multi-Input Field
      • Combo Box
      • Multi-Combo Box
      • Select
      • Smart Field
      • Mask Input
      • ———————————–
      • Select Dialog
      • Table Select Dialog
      • Value Help Dialog
      • ———————————–
      • Checkbox
      • Radio Button
      • Rating Indicator
      • Slider
      • Range Slider
      • Step Input
      • Switch
      • ———————————–
      • Date Picker
      • Time Picker
      • Date/Time Picker
      • Date Range Selection
      • Dynamic Date
        (Smart Filter Bar)
      • Dynamic Date Range
      • Calendar Date Interval
      • Calendar
      • Planning Calendar
      • Single Planning Calendar
      • ———————————–
      • Color Palette
      • Color Palette Popover
      • Color Picker
      • Color Picker Popover
      • ———————————–
      • Feed and Notes
      • Rich Text Editor
      • Search
      • Text Area
      • Upload Set
    • Reuse Components
      • Calculation Builder
      • PDF Viewer
    • Smart Controls
      • Dynamic Date
        (Smart Filter Bar)
      • Smart Field
      • Smart Filter Bar
      • Smart Form
      • Smart Link
      • Smart List
      • Smart Table
    • Support for Assistive Technologies
      • Invisible Message
      • Invisible Text
  • SAP Fiori Elements Framework
    • Overview
    • Analytical List Page / Overview Page
    • List Report / Worklist
      • Header
      • Content Area
      • Worklist
    • Object Page
      • Overview
      • Header
      • Content Area
      • Footer Bar
    • Table / List
      • Table Types
      • Table Toolbar
      • Table Features
      • Table Rows
      • List
    • Replacing Placeholder Text
    • Terminology
  • Analytical Frameworks
    • Overview
    • Analysis Path Framework
    • SAP Smart Business
  • Designer Toolkit
    • Overview
    • Download Design Stencils
      • Overview
      • Figma
      • Sketch
      • Axure RP
      • Adobe XD
    • Ask the Community

Fiori for Web Design Guidelines

Explore SAP Fiori
© 2023 SAP SE. All rights reserved.
  • Privacy
  • Legal Disclosure
  • Copyright
  • Terms of Use
  • Go.SAP.com
  • SAP Community Network
We'd appreciate your feedback!

Processing your feedback

Thank you Your feedback has been sent to the SAP Fiori design team.

Thank you for your helping us to improve our guidelines!

 
We'd appreciate your feedback!
Please fill out the form to send us your feedback.
    • Can you tell us why?

Your feedback is anonymous, so you won't receive a reply. If you'd like help with a specific question, please visit the SAP Fiori Community