Layouts/Dynamic Side Content
fd-dynamic-side · 5 examples from SAP's documentation · Back to the gallery
About
Dynamic side content is a layout control that displays supplemental content in a separate area to support the users' understanding of the main content displayed. **The dynamic side content consists of two elements:**
Left
To display side content from the left, put `fd-dynamic-side__side` as the first child element of `fd-dynamic-side`.
Right
To display side content from the right, put `fd-dynamic-side__side` as the second child element of `fd-dynamic-side`.
Below
To display side content below the main content area, keep `fd-dynamic-side__side` as the last child element and add the `fd-dynamic-side--below` modifier class.
Equal split
The equal split mode provides users with a 50:50 view of the main content and side content, which enables users to show more data i.e. for comparison purposes. To enable equal split mode, add the `fd-dynamic-side--equal-split` modifier class to the container.
Responsiveness
To display the dynamic side content for specific screen sizes, use the respective modifier classes: | Size | Modifier class | | :--- |:--- | | Small | \