Layouts/Resizable Card Layout
fd-resizable-card-layout · 4 examples from SAP's documentation · Back to the gallery
About
The resizable card layout is a layout for the overview page. It enables users to define a personalized card layout by changing not only the position of a card, but also its size, and thus how the card content is presented. This layout gives users much greater flexibility in tailoring the overview page to their specific business needs. And it allows app teams to offer varying levels of detail for any given card. Whenever the size of a card changes, the content adapts automatically to show the most relevant information in the available space.
Resizable card layout
Resizable card layout with multiple cards.
- List item 1
- List item 2
- List item 3
- List item 4
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
- List item 1
- List item 2
- List item 3
- List item 4
| Name | Status | Price | Country | |
|---|---|---|---|---|
| Banana | Available | 5 EUR | India | |
| Pineapple | Out of stock | 2 EUR | Mexico | |
| Orange | Temporary unavailable | 6 EUR | Spain |
Card resize in horizontal and vertical directions
Cards can be resized in horizontal direction as well as vertical direction. Resize handle will expand on right border for horizontal resize and bottom border for vertical resize.
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
Card resize in horizontal directions
Cards can also be resized in horizontal direction only. Resize handle will expand on right border.
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
Card resize in vertical directions
Cards can be resized in vertical direction only. Resize handle will expand on bottom border.
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5