feat(website): add infobox component

website/src/components/InfoBox/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Box } from 'reflexbox';
+
+const Wrapper = styled(Box)`
+  padding: 16px;
+  background: ${(p) => p.theme.colors.violetLighten45};
+  color: white;
+  border-radius: 5px;
+  margin: 20px 0;
+`;
+
+const Title = styled(Box)`
+  font-size: 20px;
+  margin-bottom: 4px;
+  font-weight: 900;
+`;
+
+export default ({ title = null, text, ...rest }) => {
+  return (
+    <Wrapper {...rest}>
+      <Title>{title}</Title>
+      <div>{text}</div>
+    </Wrapper>
+  );
+};

website/src/markdown/docs/getting-started/index.md

@@ -49,13 +49,19 @@ const elements = [
   { id: 'e2-3', source: '2', target: '3' },
 ];
 
-export default () => <div style={{ height: 300 }}><ReactFlow elements={elements} /></div>;
+export default () => (
+  <div style={{ height: 300 }}>
+    <ReactFlow elements={elements} />
+  </div>
+);
 ```
 
 import Flow from './index';
 
 <Flow />
 
+<InfoBox title="Attention!" text="The dimensions of your React Flow component depend on the parents dimensions."/>
+
 ## Basic Functionality
 
 We don’t do any state updates besides the positions. This means that you need to pass the functions to remove an element or connect nodes by yourself. You can implement your own ones or use the [helper functions](/docs/api/helper-functions/) that come with the library. Here you see an example of how to use the heler functions `removeElements` and `addEdge`.

website/src/templates/mdx-renderer/DocMdx.js

@@ -6,6 +6,7 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 
 import { H1, H2, H3, H4, Text } from 'components/Typo';
 import CodeBlock from 'components/CodeBlock/Mdx';
+import InfoBox from 'components/InfoBox';
 
 import { getThemeSpacePx } from 'utils/css-utils';
 
@@ -123,6 +124,7 @@ const CustomComponents = {
   p: Text,
   pre: (props) => <div {...props} />,
   code: CodeBlock,
+  InfoBox,
 };
 
 const BlogMdx = ({ content = null }) => {