Components/Panel
fd-panel · 6 examples from SAP's documentation · Back to the gallery
About
The panel is a container for grouping and displaying information. Panels are responsive and can be collapsed to save additional screen space.
**Use the panel if:** - You need to group or display information. - You want to give users the option to hide this information. - You want to show additional information on demand (for example, a panel could show optional input fields for an advanced search). **Do not use the panel in:** - The content area of a **Dynamic Page**. **Use the panel if:** - You need to group or display information. - You want to give users the option to hide this information. - You want to show additional information on demand (for example, a panel could show optional input fields for an advanced search). - The content area of a **Dynamic Page**.
Fixed
Panel header with a long title that reflows at narrow viewports (320px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet.
Expandable
Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available).
Panel header collapsed
Panel header expanded
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet.
Fixed height
When the height of the panel's content is set to a fixed size, the content area becomes scrollable.
Panel header expanded
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed temporibus dolorum cupiditate recusandae quaerat aperiam facilis provident nemo nostrum porro corporis nesciunt ducimus, ad molestias adipisci soluta iure quam repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi placeat temporibus, eveniet modi nobis inventore debitis explicabo consectetur, sunt fugit suscipit dolore ab et ullam natus, in molestiae deserunt. Aperiam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum eveniet consequatur quis dolores, voluptatem et! Odit laboriosam, ducimus accusantium autem minus maxime excepturi, voluptatibus delectus sint animi soluta incidunt officia? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam blanditiis fuga aspernatur dolore numquam culpa quos perspiciatis nobis ipsum soluta nostrum, consequatur ab, asperiores minus eum labore inventore maxime tempore! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima, deserunt nisi veritatis omnis corrupti id esse minus. Repellat cum maxime, ipsam quia voluptate doloremque similique esse rerum animi provident quos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta nemo non perferendis odit necessitatibus eius dolorum nam dolor neque sed. Dolores obcaecati facilis voluptate temporibus eaque saepe reprehenderit, voluptatum repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae temporibus repellendus nulla aliquam eos officiis molestias doloribus magnam, ullam sunt, explicabo similique delectus voluptatum laudantium doloremque at cum non esse! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius iusto odit saepe. Delectus optio reiciendis quia unde est excepturi blanditiis, nisi sed voluptatem obcaecati commodi illum dolorem architecto in officia! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed temporibus dolorum cupiditate recusandae quaerat aperiam facilis provident nemo nostrum porro corporis nesciunt ducimus, ad molestias adipisci soluta iure quam repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi placeat temporibus, eveniet modi nobis inventore debitis explicabo consectetur, sunt fugit suscipit dolore ab et ullam natus, in molestiae deserunt. Aperiam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum eveniet consequatur quis dolores, voluptatem et! Odit laboriosam, ducimus accusantium autem minus maxime excepturi, voluptatibus delectus sint animi soluta incidunt officia? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam blanditiis fuga aspernatur dolore numquam culpa quos perspiciatis nobis ipsum soluta nostrum, consequatur ab, asperiores minus eum labore inventore maxime tempore! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima, deserunt nisi veritatis omnis corrupti id esse minus. Repellat cum maxime, ipsam quia voluptate doloremque similique esse rerum animi provident quos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta nemo non perferendis odit necessitatibus eius dolorum nam dolor neque sed. Dolores obcaecati facilis voluptate temporibus eaque saepe reprehenderit, voluptatum repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae temporibus repellendus nulla aliquam eos officiis molestias doloribus magnam, ullam sunt, explicabo similique delectus voluptatum laudantium doloremque at cum non esse! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius iusto odit saepe. Delectus optio reiciendis quia unde est excepturi blanditiis, nisi sed voluptatem obcaecati commodi illum dolorem architecto in officia!
Borderless
Panel may have a border or not. For Panel without border use the \
Panel header collapsed
Panel header expanded
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet.
Panel header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet.
Transparent
The background of the content can be set to transparent by applying the \
Panel header expanded
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet.
Panel header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Suspendisse facilisis elit ut dolor posuere consectetur. Morbi ac nibh sit amet dolor lobortis tincidunt in ornare erat.
Vestibulum tristique euismod enim, ac volutpat odio cursus sit amet.
StickyHeader
Sticky header can be achieved by applying the \
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut laoreet lorem. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia curae; Aenean sagittis aliquam justo et suscipit.
Nam molestie, magna at elementum pulvinar, nisi enim venenatis ante, id convallis mi neque nec risus. Cras blandit sagittis augue at facilisis.
Mauris egestas nunc nec diam mollis auctor. Vestibulum sed euismod elit, eget accumsan quam. Donec eleifend porttitor viverra.
Nunc porttitor dictum erat at molestie. Sed quis velit dolor. Vestibulum et turpis eget enim gravida gravida vitae at massa.