diff --git a/docs/public/static/images/system/demo.jpg b/docs/public/static/images/system/demo.jpg
new file mode 100644
index 00000000000000..e6cb96a59aff64
Binary files /dev/null and b/docs/public/static/images/system/demo.jpg differ
diff --git a/docs/src/pages/system/basics/Demo.js b/docs/src/pages/system/basics/Demo.js
index 3a5fea248aa197..b8bbbdfca70e8a 100644
--- a/docs/src/pages/system/basics/Demo.js
+++ b/docs/src/pages/system/basics/Demo.js
@@ -1,162 +1,67 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Box from '@material-ui/core/Box';
+import { alpha } from '@material-ui/core/styles';
+import ErrorIcon from '@material-ui/icons/Error';
 
-const CardHeader = (props) => {
-  const imgSize = [60, 90, 90, 120, 150];
+export default function Demo() {
   return (
     <Box
-      className="CardHeader"
       sx={{
-        display: 'inline-flex',
+        display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
         alignItems: 'center',
-        justifContent: 'center',
-        bgcolor: `${props.color}.main`,
-        width: ['100%', '100%', '200px', '300px', '400px'],
-        height: ['100px', '200px', '100%', '100%', '100%'],
+        bgcolor: 'background.paper',
+        overflow: 'hidden',
+        borderRadius: '12px',
+        boxShadow: 1,
+        fontWeight: 'fontWeightBold',
       }}
     >
-      <Box
-        {...props}
-        component="img"
-        sx={{
-          border: 2,
-          borderColor: 'white',
-          display: 'block',
-          position: 'relative',
-          height: imgSize,
-          width: imgSize,
-          margin: 'auto',
-          borderRadius: '50%',
-          ...props.sx,
-        }}
+      <Img
+        sx={{ width: '100%', maxWidth: { xs: 350, md: 250 } }}
+        alt="The house from the offer."
+        src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=400&dpr=2"
       />
-    </Box>
-  );
-};
-
-CardHeader.propTypes = {
-  color: PropTypes.oneOf([
-    'error',
-    'info',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]),
-  sx: PropTypes.object,
-};
-
-const CardContent = (props) => {
-  return (
-    <Box
-      {...props}
-      sx={{
-        display: 'inline-block',
-        px: 1,
-        py: 2,
-        ...props.sx,
-      }}
-    >
-      <Box
-        className="CardContent-header"
-        sx={{
-          fontSize: [12, 14, 16, 18, 20],
-          fontWeight: [400, 400, 400, 500, 600],
-          color: `${props.color}.main`,
-          my: [1, 1, 2, 2, 2],
-        }}
-      >
-        {props.header}
-      </Box>
       <Box
         sx={{
-          fontSize: [10, 12, 14, 16, 18],
-          fontWeight: [400, 400, 400, 500, 600],
-          color: 'grey',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: { xs: 'center', md: 'flex-start' },
+          m: 3,
+          minWidth: { md: 350 },
         }}
       >
-        {props.description}
+        <Box component="span" sx={{ fontSize: 16, mt: 1 }}>
+          123 Main St, Pheonix AZ
+        </Box>
+        <Box component="span" sx={{ color: 'primary.main', fontSize: 22 }}>
+          $280,000 — $310,000
+        </Box>
+        <Box
+          sx={{
+            mt: 1.5,
+            p: 0.5,
+            backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),
+            borderRadius: '5px',
+            color: 'primary.main',
+            fontWeight: 'fontWeightMedium',
+            display: 'flex',
+            fontSize: 12,
+            alignItems: 'center',
+            '& svg': {
+              fontSize: 21,
+              mr: 0.5,
+            },
+          }}
+        >
+          <ErrorIcon />
+          {'CONFIDENCE SCORE 85%'}
+        </Box>
       </Box>
     </Box>
   );
-};
-
-CardContent.propTypes = {
-  color: PropTypes.oneOf([
-    'error',
-    'info',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]),
-  description: PropTypes.string,
-  header: PropTypes.string,
-  sx: PropTypes.object,
-};
-
-const Card = (props) => {
-  const {
-    color = 'primary',
-    profileImage,
-    header,
-    description,
-    sx,
-    ...rest
-  } = props;
-  return (
-    <Box
-      {...rest}
-      sx={{
-        display: 'flex',
-        flexDirection: ['column', 'column', 'row', 'row', 'row'],
-        width: [100, 200, 300, 400, 500],
-        border: 1,
-        borderColor: 'lightgrey',
-        borderRadius: '5px',
-        boxShadow: 3,
-        minHeight: [150, 100, 200, 300, 300],
-        ':hover': {
-          '& .CardHeader': {
-            bgcolor: `${props.color}.dark`,
-          },
-          '& .CardContent-header': {
-            color: `${props.color}.dark`,
-          },
-          boxShadow: 6,
-        },
-        ...sx,
-      }}
-    >
-      <CardHeader color={color} src={profileImage} alt={header} />
-      <CardContent color={color} header={header} description={description} />
-    </Box>
-  );
-};
-
-Card.propTypes = {
-  color: PropTypes.oneOf([
-    'error',
-    'info',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]),
-  description: PropTypes.string.isRequired,
-  header: PropTypes.string,
-  profileImage: PropTypes.string,
-  sx: PropTypes.object,
-};
+}
 
-export default function Demo() {
-  return (
-    <Card
-      color="success"
-      profileImage="/static/images/cards/contemplative-reptile.jpg"
-      header="Contemplative Reptile"
-      description="This reptile is thinking about the future of our planet..."
-    />
-  );
+function Img(props) {
+  return <Box component="img" {...props} />;
 }
diff --git a/docs/src/pages/system/basics/Demo.tsx b/docs/src/pages/system/basics/Demo.tsx
index 9dbcb06b48bc88..d8c20d2ccdfc49 100644
--- a/docs/src/pages/system/basics/Demo.tsx
+++ b/docs/src/pages/system/basics/Demo.tsx
@@ -1,144 +1,72 @@
 import * as React from 'react';
-import Box, { SxProps } from '@material-ui/core/Box';
+import Box, { BoxProps } from '@material-ui/core/Box';
+import { alpha } from '@material-ui/core/styles';
+import ErrorIcon from '@material-ui/icons/Error';
 
-type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-
-interface CardHeaderProps {
-  color?: Color;
-  sx?: SxProps;
-  src?: string;
-  alt?: string;
-}
-
-const CardHeader: React.FC<CardHeaderProps> = (props) => {
-  const imgSize = [60, 90, 90, 120, 150];
+export default function Demo() {
   return (
     <Box
-      className="CardHeader"
       sx={{
-        display: 'inline-flex',
+        display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
         alignItems: 'center',
-        justifContent: 'center',
-        bgcolor: `${props.color}.main`,
-        width: ['100%', '100%', '200px', '300px', '400px'],
-        height: ['100px', '200px', '100%', '100%', '100%'],
+        bgcolor: 'background.paper',
+        overflow: 'hidden',
+        borderRadius: '12px',
+        boxShadow: 1,
+        fontWeight: 'fontWeightBold',
       }}
     >
-      <Box
-        {...props}
-        component="img"
-        sx={{
-          border: 2,
-          borderColor: 'white',
-          display: 'block',
-          position: 'relative',
-          height: imgSize,
-          width: imgSize,
-          margin: 'auto',
-          borderRadius: '50%',
-          ...props.sx,
-        }}
+      <Img
+        sx={{ width: '100%', maxWidth: { xs: 350, md: 250 } }}
+        alt=""
+        src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=400&dpr=2"
       />
-    </Box>
-  );
-};
-
-interface CardContentProps {
-  color?: Color;
-  header?: string;
-  description?: string;
-  sx?: SxProps;
-}
-
-const CardContent: React.FC<CardContentProps> = (props) => {
-  return (
-    <Box
-      {...props}
-      sx={{
-        display: 'inline-block',
-        px: 1,
-        py: 2,
-        ...props.sx,
-      }}
-    >
       <Box
-        className="CardContent-header"
         sx={{
-          fontSize: [12, 14, 16, 18, 20],
-          fontWeight: [400, 400, 400, 500, 600],
-          color: `${props.color}.main`,
-          my: [1, 1, 2, 2, 2],
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: { xs: 'center', md: 'flex-start' },
+          m: 3,
+          minWidth: { md: 350 },
         }}
       >
-        {props.header}
-      </Box>
-      <Box
-        sx={{
-          fontSize: [10, 12, 14, 16, 18],
-          fontWeight: [400, 400, 400, 500, 600],
-          color: 'grey',
-        }}
-      >
-        {props.description}
+        <Box component="span" sx={{ fontSize: 16, mt: 1 }}>
+          123 Main St, Pheonix AZ
+        </Box>
+        <Box component="span" sx={{ color: 'primary.main', fontSize: 22 }}>
+          $280,000 — $310,000
+        </Box>
+        <Box
+          sx={{
+            mt: 1.5,
+            p: 0.5,
+            backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.1),
+            borderRadius: '5px',
+            color: 'primary.main',
+            fontWeight: 'fontWeightMedium',
+            display: 'flex',
+            fontSize: 12,
+            alignItems: 'center',
+            '& svg': {
+              fontSize: 21,
+              mr: 0.5,
+            },
+          }}
+        >
+          <ErrorIcon />
+          {'CONFIDENCE SCORE 85%'}
+        </Box>
       </Box>
     </Box>
   );
-};
-
-interface CardProps {
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-  header?: string;
-  description: string;
-  sx?: SxProps;
-  profileImage?: string;
 }
 
-const Card: React.FC<CardProps> = (props) => {
-  const {
-    color = 'primary',
-    profileImage,
-    header,
-    description,
-    sx,
-    ...rest
-  } = props;
-  return (
-    <Box
-      {...rest}
-      sx={{
-        display: 'flex',
-        flexDirection: ['column', 'column', 'row', 'row', 'row'],
-        width: [100, 200, 300, 400, 500],
-        border: 1,
-        borderColor: 'lightgrey',
-        borderRadius: '5px',
-        boxShadow: 3,
-        minHeight: [150, 100, 200, 300, 300],
-        ':hover': {
-          '& .CardHeader': {
-            bgcolor: `${props.color}.dark`,
-          },
-          '& .CardContent-header': {
-            color: `${props.color}.dark`,
-          },
-          boxShadow: 6,
-        },
-        ...sx,
-      }}
-    >
-      <CardHeader color={color} src={profileImage} alt={header} />
-      <CardContent color={color} header={header} description={description} />
-    </Box>
-  );
-};
+interface ImgProps extends BoxProps {
+  src?: string;
+  alt?: string;
+}
 
-export default function Demo() {
-  return (
-    <Card
-      color="success"
-      profileImage="/static/images/cards/contemplative-reptile.jpg"
-      header="Contemplative Reptile"
-      description="This reptile is thinking about the future of our planet..."
-    />
-  );
+function Img(props: ImgProps) {
+  return <Box component="img" {...props} />;
 }
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md
index e82f5e3d50b69e..cd8683cfd517db 100644
--- a/docs/src/pages/system/basics/basics.md
+++ b/docs/src/pages/system/basics/basics.md
@@ -6,7 +6,7 @@ The system lets you quickly build custom UI components leveraging the design tok
 
 ## Demo
 
-{{"demo": "pages/system/basics/Demo.js"}}
+{{"demo": "pages/system/basics/Demo.js", "bg": true, "defaultCodeOpen": true}}
 
 ## Why
 
@@ -86,7 +86,7 @@ We offer lots of shorthands on the CSS properties. Here are few examples:
 
 ### Superset of CSS
 
-As the property is a superset of CSS, you can use child or pseudo selectors, media queries, raw css values etc. On the example above, we had several examples of this.
+As the property is a superset of CSS, you can use child or pseudo selectors, media queries, raw css values etc. Here are few examples:
 
 ```jsx
   // Using pseudo selectors
@@ -94,10 +94,10 @@ As the property is a superset of CSS, you can use child or pseudo selectors, med
     sx={{
       // some styles
       ":hover": {
-        '& .CardHeader': {
+        '& .ChildSelector': {
           bgcolor: `${props.color}.dark`,
         },
-        '& .CardContent-header': {
+        '& .OtherChildSelector': {
           color: `${props.color}.dark`,
         },
         boxShadow: 6,