content-density
Content Density in Fundamental Styles
SAP Fiori provides content density modes that allow you to render components at different sizes to optimize for different devices and use cases.
When to Use This Skill
Use this skill when you need to:
- Choose between cozy, compact, or condensed modes
- Apply content density to your application or specific sections
- Understand when to use touch-friendly vs information-dense layouts
- Optimize UI for different device types (touch vs mouse/keyboard)
Content Density Modes
Cozy Mode (Default)
Description: Cozy mode displays components with dimensions large enough for fingertip interaction. The default touch area is 2.75 rem (44 px).
More from sap/fundamental-styles
layout-patterns
Common UI layout patterns using fundamental-styles - login forms, dashboards, master-detail, wizards, and more
2bem-naming
BEM (Block Element Modifier) methodology and naming conventions used in fundamental-styles with real examples
2component-composition
How to combine fundamental-styles components correctly - required wrappers, nesting rules, and common composition patterns
2component-guidance-data
Fiori guidelines for data display components such as Table, List, Tree, Avatar, Calendar, Icons, etc
2component-guidance-forms
Fiori guidelines for form controls and input components such as Checkbox, Input, Select, Textarea, Date Picker, etc
2component-guidance-navigation
Fiori guidelines for navigation components such as Breadcrumb, Menu, Link, Shellbar, Vertical Navigation, etc
2