{ReStory}

Layout/Panel: Groups

Container component with header, content and footer sections
View fullscreen
Source Code
1export const Groups = component(() => (
2 ​<Stack direction="vertical" gap="lg">
3 ​ ​<div>
4 ​ ​ ​<h4>Vertical Stack</h4>
5 ​ ​ ​<Stack direction="vertical" gap="none">
6 ​ ​ ​ ​<Panel variant="light">
7 ​ ​ ​ ​ ​<DemoBlock>First panel</DemoBlock>
8 ​ ​ ​ ​</Panel>
9 ​ ​ ​ ​<Panel>
10 ​ ​ ​ ​ ​<DemoBlock>Second panel</DemoBlock>
11 ​ ​ ​ ​</Panel>
12 ​ ​ ​ ​<Panel variant="dark">
13 ​ ​ ​ ​ ​<DemoBlock>Third panel</DemoBlock>
14 ​ ​ ​ ​</Panel>
15 ​ ​ ​</Stack>
16 ​ ​</div>
17
18 ​ ​<div>
19 ​ ​ ​<h4>Horizontal Stack</h4>
20 ​ ​ ​<Stack direction="horizontal" gap="none">
21 ​ ​ ​ ​<Panel variant="light">
22 ​ ​ ​ ​ ​<DemoBlock>Side panel</DemoBlock>
23 ​ ​ ​ ​</Panel>
24 ​ ​ ​ ​<Panel>
25 ​ ​ ​ ​ ​<DemoBlock>Main content</DemoBlock>
26 ​ ​ ​ ​</Panel>
27 ​ ​ ​ ​<Panel variant="dark">
28 ​ ​ ​ ​ ​<DemoBlock>Details panel</DemoBlock>
29 ​ ​ ​ ​</Panel>
30 ​ ​ ​</Stack>
31 ​ ​</div>
32 ​</Stack>
33));