diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js
index bf6670f5..a962efa7 100644
--- a/ui/src/components/list/item.js
+++ b/ui/src/components/list/item.js
@@ -15,16 +15,27 @@ const {
} = fns;
const {
- default: styled
+ default: styled,
+ css
} = Styled;
+const paper = `
+ 0 8px 0 -5px #fafafa,
+ 0 8px 1px -4px ${colors.borderSecondary},
+ 0 16px 0 -10px #fafafa,
+ 0 16px 1px -9px ${colors.borderSecondary},
+ 0 18px 1px -11px ${colors.borderSecondary};
+`;
+
const height = (props) => props.collapsed
? remcalc(48)
: remcalc(126);
-const shadow = (props) => props.collapsed && props.headed
- ? boxes.bottomShaddowDarker
- : boxes.bottomShaddow;
+const shadow = (props) => props.stacked
+ ? paper
+ : props.collapsed && props.headed
+ ? boxes.bottomShaddowDarker
+ : boxes.bottomShaddow;
const Item = styled(Row)`
position: relative;
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 2e96c2bc..a45462d9 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -618,4 +618,23 @@ storiesOf('ListItem', module)
+ ))
+ .add('stacked', () => (
+
+
+
+
+ Nginx 01
+ 4 instances
+ Flags
+
+
+ Metrics
+
+
+
+ …
+
+
+
));