More layout changes

1 files changed, 27 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
index be3ded71f..cc3e88280 100644
--- a/packages/website/ts/@next/components/blockIconLink.tsx
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -19,14 +19,41 @@ export const BlockIconLink = (props: Props) => (
                 size="large"
                 margin={[0, 0, 'default', 0]}
             />
+
+            <Title>
+                {props.title}
+            </Title>
+
+            <Link
+                isWithArrow={true}
+                isTransparent={true}
+                isNoBorder={true}
+                href={props.linkUrl}
+            >
+                {props.linkLabel}
+            </Link>
         </div>
     </Wrap>
 );
 
 const Wrap = styled.div`
+    width: calc(50% - 15px);
+    height: 400px;
     padding: 40px;
     display: flex;
+    justify-content: center;
     align-items: center;
     text-align: center;
     background-color: ${props => props.theme.lightBgColor};
+
+    @media (max-width: 900px) {
+        width: 100%;
+        margin-top: 30px;
+    }
+`;
+
+const Title = styled.h2`
+    font-size: 20px;
+    margin-bottom: 30px;
+    color: ${props => props.theme.linkColor};
 `;