chore: add example of divider with content

Author: segunadebayo

configs/search-meta.json

@@ -47622,14 +47622,25 @@
     "hierarchy": { "lvl1": "Divider", "lvl2": "Usage", "lvl3": null }
   },
   {
-    "content": "Divider Orientation",
+    "content": "Changing the orientation",
     "id": "//docs/components/divider/usage",
     "type": "lvl3",
-    "url": "/docs/components/divider/usage#divider-orientation",
+    "url": "/docs/components/divider/usage#changing-the-orientation",
     "hierarchy": {
       "lvl1": "Divider",
       "lvl2": "Usage",
-      "lvl3": "Divider Orientation"
+      "lvl3": "Changing the orientation"
+    }
+  },
+  {
+    "content": "Adding content within a Divider",
+    "id": "//docs/components/divider/usage",
+    "type": "lvl3",
+    "url": "/docs/components/divider/usage#adding-content-within-a-divider",
+    "hierarchy": {
+      "lvl1": "Divider",
+      "lvl2": "Changing the orientation",
+      "lvl3": "Adding content within a Divider"
     }
   },
   {

content/docs/components/divider/usage.mdx

@@ -21,7 +21,7 @@ tag.
 <Divider />
 ```
 
-### Divider Orientation
+### Changing the orientation
 
 Pass the `orientation` prop and set it to either `horizontal` or `vertical`.
 
@@ -38,6 +38,20 @@ assigned a height.
 </Center>
 ```
 
+### Adding content within a Divider
+
+In some cases, you might want to add content within a divider. To do this, you
+can compose the Divider and AbsoluteCenter components.
+
+```jsx
+<Box position='relative' padding='10'>
+  <Divider />
+  <AbsoluteCenter bg='white' px='4'>
+    Content
+  </AbsoluteCenter>
+</Box>
+```
+
 ## Composition
 
 ```jsx