diff --git a/src/scss/cdb-components/modals.scss b/src/scss/cdb-components/modals.scss
index f108422..1138e73 100644
--- a/src/scss/cdb-components/modals.scss
+++ b/src/scss/cdb-components/modals.scss
@@ -719,3 +719,118 @@
 */
 
 
+
+/* SG
+# Modals/Layout
+
+
+```
+  <div class="Modal">
+    <div class="Modal-header">
+      <div class="Modal-headerContainer">
+        Header
+      </div>
+    </div>
+    <div class="Modal-container">
+      <div class="Modal-inner">
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+      </div>
+    </div>
+    <div class="Modal-footer">
+      <div class="Modal-footerContainer">
+        Footer
+      </div>
+    </div>
+  </div>
+```
+*/
+
+
+.Modal {
+  @include display-flex();
+  @include flex-direction(column);
+  height: 100%;
+  background: $cThirdBackground;
+  overflow: hidden;
+}
+.Modal-header {
+  @include display-flex();
+  @include justify-content(center);
+  @include flex(0 0 auto);
+  padding: $baseSize * 3 0;
+  background: $cWhite;
+}
+.Modal-footer {
+  @include display-flex();
+  @include justify-content(center);
+  @include flex(0 0 auto);
+}
+.Modal-container {
+  @include display-flex();
+  @include justify-content(center);
+  @include flex(1 1 auto);
+  overflow: scroll;
+}
+.Modal-inner,
+.Modal-headerContainer,
+.Modal-footerContainer {
+  @include flex(0 0 auto);
+  width: 940px;
+}
+
+.Modal-footerContainer {
+  padding: 24px 0;
+  border-top: 1px solid $cSecondaryLine;
+}
+
+