Introduces WrapCentered

1 files changed, 10 insertions, 1 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index d64bcf74a..c807ccb36 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -83,17 +83,26 @@ export const Section = styled.section<SectionProps>`
   }
 `;
 
-export const Wrap = styled.div<WrapProps>`
+const WrapBase = styled.div<WrapProps>`
   max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
   background-color: ${props => props.bgColor};
   margin: 0 auto;
+`;
 
+export const Wrap = styled(WrapBase)`
   @media (min-width: ${BREAKPOINTS.mobile}) {
     display: flex;
     justify-content: space-between;
   }
 `;
 
+export const WrapCentered = styled(WrapBase)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const Column = styled.div<ColumnProps>`
   padding: ${props => !props.noPadding && '30px'};
   border: 1px dotted rgba(255, 0, 0, 0.3);