diff --git a/src/components/APIDoc/SchemaPropertyView.tsx b/src/components/APIDoc/SchemaPropertyView.tsx
index 379fbf67..e2bae457 100644
--- a/src/components/APIDoc/SchemaPropertyView.tsx
+++ b/src/components/APIDoc/SchemaPropertyView.tsx
@@ -1,7 +1,18 @@
-import React, {ReactNode} from 'react';
-import { Text, TextContent, TextVariants, Flex, FlexItem, Label, LabelGroup } from '@patternfly/react-core';
-import { OpenAPIV3 } from 'openapi-types';
-
+import React, { ReactNode } from "react";
+import {
+  Text,
+  TextContent,
+  TextVariants,
+  Flex,
+  FlexItem,
+  Label,
+  LabelGroup,
+  Level,
+  ExpandableSection,
+  CodeBlock,
+  CodeBlockCode,
+} from "@patternfly/react-core";
+import { OpenAPIV3 } from "openapi-types";
 
 interface PropertyViewComponentProps {
   propSchema?: OpenAPIV3.ReferenceObject | OpenAPIV3.SchemaObject;
@@ -10,10 +21,17 @@ interface PropertyViewComponentProps {
   required: boolean | undefined;
 }
 
-export const PropertyView:React.FunctionComponent<PropertyViewComponentProps> = ({propSchema, propName, propertyType, required}) => {
+export const PropertyView: React.FunctionComponent<
+  PropertyViewComponentProps
+> = ({ propSchema, propName, propertyType, required }) => {
   let extraProps;
-  if (propSchema && !('$ref' in propSchema) ) {
-    extraProps = <ExtraPropertyView propSchema={propSchema}/>
+  let extraExample;
+  if (propSchema && !("$ref" in propSchema)) {
+    extraProps = <ExtraPropertyView propSchema={propSchema} />;
+    if(propSchema.example) {
+      extraExample = <ExtraExampleView propSchema={propSchema} />
+    }
+
   }
   return (
     <Flex>
@@ -24,74 +42,124 @@ export const PropertyView:React.FunctionComponent<PropertyViewComponentProps> =
               <Text component={TextVariants.h6}>{propName}</Text>
             </FlexItem>
             <FlexItem>
-              <Text component={TextVariants.p} className="pf-u-danger-color-100">{required && "*"}</Text>
+              <Text
+                component={TextVariants.p}
+                className="pf-u-danger-color-100"
+              >
+                {required && "*"}
+              </Text>
+            </FlexItem>
+            <FlexItem>
+                <Text 
+                  component={TextVariants.p}>
+                  {propertyType}
+                </Text>
+            </FlexItem>
+          </Flex>
+          <Flex>
+            <FlexItem>
+              {extraExample}
             </FlexItem>
           </Flex>
         </TextContent>
       </FlexItem>
-      <FlexItem>
-        <TextContent>
-          <Text component={TextVariants.p}>
-            {propertyType}
-          </Text>
-        </TextContent>
-      </FlexItem>
-      <FlexItem>
-        {extraProps}
-      </FlexItem>
+      <FlexItem>{extraProps}</FlexItem>
     </Flex>
-  )
+  );
+};
+
+interface ExtraExampleViewProps {
+  propSchema: OpenAPIV3.SchemaObject;
 }
 
+export const ExtraExampleView: React.FunctionComponent<
+  ExtraExampleViewProps
+> = ({ propSchema }) => {
+  return (
+    <><Flex>
+    {propSchema.description && (
+      <Level>
+        <Text>{propSchema.description}</Text>
+      </Level>
+    )}
+    </Flex>
+    <ExpandableSection toggleText="Example">
+      <CodeBlock>
+        <CodeBlockCode id="code-content">{propSchema.example}</CodeBlockCode>
+      </CodeBlock>
+    </ExpandableSection>
+    </>
+  )
+}
+  
 
 interface ExtraPropertyViewProps {
   propSchema: OpenAPIV3.SchemaObject;
 }
-export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> = ({propSchema}) => {
+export const ExtraPropertyView: React.FunctionComponent<
+  ExtraPropertyViewProps
+> = ({ propSchema }) => {
   let maxMin: string | undefined;
   if (propSchema.maximum && propSchema.minimum) {
-    maxMin = (propSchema.exclusiveMinimum ? '>': '≥') + ` ${propSchema.minimum} and `
-    maxMin += (propSchema.exclusiveMaximum ? '<' : '≤') + ` ${propSchema.maximum}`
+    maxMin =
+      (propSchema.exclusiveMinimum ? ">" : "≥") + ` ${propSchema.minimum} and `;
+    maxMin +=
+      (propSchema.exclusiveMaximum ? "<" : "≤") + ` ${propSchema.maximum}`;
   } else if (propSchema.maximum) {
-    maxMin = (propSchema.exclusiveMaximum ? '<' : '≤') + ` ${propSchema.maximum}`
+    maxMin =
+      (propSchema.exclusiveMaximum ? "<" : "≤") + ` ${propSchema.maximum}`;
   } else if (propSchema.minimum) {
-    maxMin = (propSchema.exclusiveMinimum ? '>' : '≥') + ` ${propSchema.minimum}`
+    maxMin =
+      (propSchema.exclusiveMinimum ? ">" : "≥") + ` ${propSchema.minimum}`;
   }
 
   let maxMinChar: string | undefined;
   if (propSchema.maxLength && propSchema.minLength) {
-    maxMinChar = `${propSchema.minLength} to ${propSchema.maxLength} chars`
+    maxMinChar = `${propSchema.minLength} to ${propSchema.maxLength} chars`;
   } else if (propSchema.maxLength) {
-    maxMinChar = `max ${propSchema.maxLength} chars`
+    maxMinChar = `max ${propSchema.maxLength} chars`;
   } else if (propSchema.minLength) {
-    maxMinChar = `min ${propSchema.minLength} chars`
+    maxMinChar = `min ${propSchema.minLength} chars`;
   }
 
   let maxMinItems: string | undefined;
   if (propSchema.maxItems && propSchema.minItems) {
-    maxMinItems = `${propSchema.minItems} to ${propSchema.maxItems} items`
+    maxMinItems = `${propSchema.minItems} to ${propSchema.maxItems} items`;
   } else if (propSchema.maxItems) {
-    maxMinItems = `max ${propSchema.maxItems} items`
+    maxMinItems = `max ${propSchema.maxItems} items`;
   } else if (propSchema.minItems) {
-    maxMinItems = `min ${propSchema.minItems} items`
+    maxMinItems = `min ${propSchema.minItems} items`;
   }
 
   let maxMinProps: string | undefined;
   if (propSchema.maxProperties && propSchema.minProperties) {
-    maxMinProps = `${propSchema.minProperties} to ${propSchema.maxProperties} properties`
+    maxMinProps = `${propSchema.minProperties} to ${propSchema.maxProperties} properties`;
   } else if (propSchema.maxProperties) {
-    maxMinProps = `max ${propSchema.maxProperties} properties`
+    maxMinProps = `max ${propSchema.maxProperties} properties`;
   } else if (propSchema.minItems) {
-    maxMinProps = `min ${propSchema.minProperties} properties`
+    maxMinProps = `min ${propSchema.minProperties} properties`;
   }
-
-  return(
+  return (
     <LabelGroup>
       {propSchema.format && <Label isCompact>{propSchema.format}</Label>}
-      {propSchema.default && <Label isCompact>default: {propSchema.default}</Label>}
-      {propSchema.enum && <LabelGroup categoryName="Enums">{propSchema.enum.map(e => <Label key={e} isCompact>{e}</Label>)}</LabelGroup>}
-      {propSchema.pattern && <Label isCompact>pattern: {propSchema.pattern}</Label>}
-      {propSchema.multipleOf && <Label isCompact>multipleOf: {propSchema.multipleOf}</Label>}
+      {propSchema.default && (
+        <Label isCompact>default: {propSchema.default}</Label>
+      )}
+      {propSchema.enum && (
+        <LabelGroup categoryName="Enums">
+          {propSchema.enum.map((e) => (
+            <Label key={e} isCompact>
+              {e}
+            </Label>
+          ))}
+        </LabelGroup>
+      )}
+      {propSchema.pattern && (
+        <Label isCompact>pattern: {propSchema.pattern}</Label>
+      )}
+      {propSchema.multipleOf && (
+        <Label isCompact>multipleOf: {propSchema.multipleOf}</Label>
+      )}
       {maxMin && <Label isCompact>{maxMin}</Label>}
       {maxMinChar && <Label isCompact>{maxMinChar}</Label>}
       {maxMinItems && <Label isCompact>{maxMinItems}</Label>}
@@ -102,5 +170,5 @@ export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> =
       {propSchema.writeOnly && <Label isCompact>write only</Label>}
       {propSchema.deprecated && <Label isCompact>deprecated</Label>}
     </LabelGroup>
-  )
-}
+  );
+};