diff --git a/doc-src/content/examples/compass/css3/regions.haml b/doc-src/content/examples/compass/css3/regions.haml
new file mode 100644
index 00000000..2bcd04a8
--- /dev/null
+++ b/doc-src/content/examples/compass/css3/regions.haml
@@ -0,0 +1,8 @@
+---
+title: CSS Regions
+description: css3 mixin for css regions
+framework: compass
+stylesheet: compass/css3/_regions.scss
+example: true
+---
+= render "partials/example"
\ No newline at end of file
diff --git a/doc-src/content/examples/compass/css3/regions/markup.haml b/doc-src/content/examples/compass/css3/regions/markup.haml
new file mode 100644
index 00000000..9431aa1f
--- /dev/null
+++ b/doc-src/content/examples/compass/css3/regions/markup.haml
@@ -0,0 +1,7 @@
+.source
+  %p
+    This is the source material
+
+.target
+  %p
+    This is the target location
\ No newline at end of file
diff --git a/doc-src/content/examples/compass/css3/regions/stylesheet.sass b/doc-src/content/examples/compass/css3/regions/stylesheet.sass
new file mode 100644
index 00000000..47553e53
--- /dev/null
+++ b/doc-src/content/examples/compass/css3/regions/stylesheet.sass
@@ -0,0 +1,17 @@
+@import compass/css3
+
+.source   
+  +flow-into(target)
+
+.target 
+  +flow-from(source)
+
+.source
+  border: 10px solid green
+  margin: 20px
+  width: 200px
+
+.target
+  border: 10px solid red
+  margin: 20px
+  width: 200px
\ No newline at end of file