diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 86dcb99a5..c32e7a25f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -9,6 +9,7 @@ This file contains a set of guidelines for contributing to UI-Components. Guidel
 ## Table of Contents
 
 [Code Standard](#code-standard)
+  * [Version Control](#version-control)
   * [Folder Structure](#folder-structure)
       * [Structure Overview](#structure-overview)
       * [Structure Explained](#structure-explained)
@@ -19,6 +20,21 @@ This file contains a set of guidelines for contributing to UI-Components. Guidel
 
 ## Code Standard
 
+### Version Control
+
+Before you create a PR,
+Please update `releaseVersion` in `release-config.json`
+if the version is lower than your changes
+
+Available Versions:
+
+* `major`: Changes with backward incompatibility
+* `minor`: Extra functionality with backward compatible changes
+* `patch`: Bug fixes or improvements with backward compatible changes
+
+When a new version is released by Jenkins,
+`releaseVersion` will be automatically reset to `defaultReleaseVersion`.
+
 ### Folder Structure
 
 #### Structure Overview
@@ -69,7 +85,7 @@ If your file is related to a single component, you should instead group it toget
 Two type objects are provided from common. `Props` contains enums for standard prop types (e.g.
 `Size` or `PositionXY`). `Variables` contains enums for the design system variables, like `Color`
 and `ZIndex`.
- 
+
 ```typescript
 import { Props, Variables } from '../../common'
 ```
@@ -121,27 +137,27 @@ styled-components is *highly encouraged*, but there are several reasons to prefe
       legacy classes to style older pages which are not using javascript. If your component is likely to need
       to be used on old `.blade.php` pages, then you can export both a js-specific class and a global classname
       as follows:
-      
+
       ```scss
       %my-component {
         // Your properties here
         color: red;
       }
-      
+
       :local(.my-component) {
         @extend %%my-component;
       }
-      
+
       .global-my-component-class {
         @extend %%my-component;
       }
       ```
-      
+
 2.    If your component relies on a third-party library which uses its own css. You should never mix css/scss
       and styled components in the same component. Ideally, look at the css for the library and see if you can
       recreate it yourself, but don't try to override properties using styled-components, and use `.scss` if
       there are no other options.
-      
+
 Aside: **NEVER** use class names from foundation or legacy sass to style your component. All styles for a component
 should be self-contained.
 
diff --git a/Jenkinsfile b/Jenkinsfile
index 3894850eb..114bf4dcc 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -6,11 +6,12 @@ import net.intellihr.CodeAnalysis
 
 def helper = new net.intellihr.Helper(this)
 def analyse = new net.intellihr.CodeAnalysis(this)
+def config
 
 def skipBuild = false
 
-final def DEFAULT_RELEASE_VERSION = 'prerelease'
-final def RELEASE_VERSION = 'prerelease'
+def DEFAULT_RELEASE_VERSION
+def RELEASE_VERSION
 
 pipeline {
   agent any
@@ -24,6 +25,9 @@ pipeline {
       steps {
         script {
           skipBuild = helper.shouldSkipBuild()
+          config = readJSON(file: 'release-config.json')
+          DEFAULT_RELEASE_VERSION = config.defaultReleaseVersion
+          RELEASE_VERSION = config.releaseVersion
         }
       }
     }
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 000000000..cb3eb5141
--- /dev/null
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,8 @@
+**The following MUST be checked prior to approval. If not relevant to your MR, remove the line from your description.**
+- [ ]  Update `releaseVersion` in `release-config.json` if it is lower
+- [ ]  Examples have been provided for any new components or functionality
+- [ ]  The `styleguide.config.js` has been updated to show the component in the ui-component page
+- [ ]  Test Coverage for any new or updated functionality
+- [ ]  Updated components have been tested locally in lapis and SPA and work as expected
+- [ ]  This PR has been tagged with PATCH, MINOR, or MAJOR.
+- [ ]  The component has data-component-type and data-component-context attributes following the standard
diff --git a/docker/bin/deploy-npm b/docker/bin/deploy-npm
index c10cb4a37..6707c31f5 100755
--- a/docker/bin/deploy-npm
+++ b/docker/bin/deploy-npm
@@ -1,5 +1,17 @@
 #!/bin/sh -xe
 
+###
+# Deploy to NPM
+#
+# The whole deployment process is as following
+#   1. Build project which compiles the code and type definitions
+#   2. `npm version` which will create a new tag for deployment
+#   3. `npm publish` which will push files to NPM and publish a new version
+#   4. Push the new tag to GitHub
+#   5. Update the release version if it is different than the default version
+#   6. Push new changes to develop
+###
+
 yarn build
 
 git config user.email "continuous.integration@intellihr.com.au"
@@ -15,9 +27,9 @@ git push --tags github
 
 git pull --rebase github develop
 
-sed -i -r "s/final def RELEASE_VERSION.*/final def RELEASE_VERSION = '$DEFAULT_RELEASE_VERSION'/" Jenkinsfile-new
+sed -i -r "s/\"releaseVersion.*/\"releaseVersion\": \"$DEFAULT_RELEASE_VERSION\"/" release-config.json
 
-git add Jenkinsfile-new
+git add release-config.json
 git commit -m "[ci skip] Reset to default release version $DEFAULT_RELEASE_VERSION" || true
 
 git push github HEAD:develop
diff --git a/release-config.json b/release-config.json
new file mode 100644
index 000000000..fabd84f02
--- /dev/null
+++ b/release-config.json
@@ -0,0 +1,4 @@
+{
+  "defaultReleaseVersion": "patch",
+  "releaseVersion": "major"
+}
diff --git a/src/common/sass/variables.ts b/src/common/sass/variables.ts
index 7e9de06f1..0eaf92320 100644
--- a/src/common/sass/variables.ts
+++ b/src/common/sass/variables.ts
@@ -110,46 +110,6 @@ namespace Variables {
     fwHeavy =          600
   }
 
-  export interface IFunctionalColorProps {
-    textColor: Variables.Color
-    backgroundColor: Variables.Color
-  }
-
-  export const functionalColors: { [i in Props.FunctionalColor]: IFunctionalColorProps } = {
-    [Props.FunctionalColor.Alert]: {
-      textColor: Variables.Color.r600,
-      backgroundColor: Variables.Color.r100
-    },
-    [Props.FunctionalColor.Success]: {
-      textColor: Variables.Color.g600,
-      backgroundColor: Variables.Color.g100
-    },
-    [Props.FunctionalColor.Warning]: {
-      textColor: Variables.Color.o600,
-      backgroundColor: Variables.Color.o100
-    },
-    [Props.FunctionalColor.Primary]: {
-      textColor: Variables.Color.i600,
-      backgroundColor: Variables.Color.i100
-    },
-    [Props.FunctionalColor.Neutral]: {
-      textColor: Variables.Color.n800,
-      backgroundColor: Variables.Color.n200
-    },
-    [Props.FunctionalColor.Secondary]: {
-      textColor: Variables.Color.b600,
-      backgroundColor: Variables.Color.b100
-    },
-    [Props.FunctionalColor.Highlight]: {
-      textColor: Variables.Color.c600,
-      backgroundColor: Variables.Color.c100
-    },
-    [Props.FunctionalColor.Dark]: {
-      textColor: Variables.Color.n200,
-      backgroundColor: Variables.Color.n700
-    }
-  }
-
   export enum LineHeight {
     lhXSmall =          18,
     lhSmall =           20,
diff --git a/src/common/types/props.ts b/src/common/types/props.ts
index d4fde970c..47aba7285 100644
--- a/src/common/types/props.ts
+++ b/src/common/types/props.ts
@@ -53,17 +53,6 @@ namespace Props {
     Record = 'record',
     RecordName = 'record_name'
   }
-
-  export enum FunctionalColor {
-    Alert = 'alert',
-    Success = 'success',
-    Warning = 'warning',
-    Primary = 'primary',
-    Neutral = 'neutral',
-    Secondary = 'secondary',
-    Highlight = 'highlight',
-    Dark = 'dark'
-  }
 }
 
 export {
diff --git a/src/domain/Layouts/SectionList/SectionList.examples.md b/src/domain/Layouts/SectionList/SectionList.examples.md
index a43c02f76..75d60c409 100644
--- a/src/domain/Layouts/SectionList/SectionList.examples.md
+++ b/src/domain/Layouts/SectionList/SectionList.examples.md
@@ -8,6 +8,11 @@ sub-components that provide responsive styling between mobile and desktop.
       display a border below itself if another section is below it in the section list and you are on desktop.
     </Text>
   </SectionList.Section>
+  <SectionList.UnstyledSection>
+    <Text>
+      This is a unstyled Section, it can be used to display data on the page with correct padding.
+    </Text>
+  </SectionList.UnstyledSection>
   <SectionList.AnnotatedSection
     header='Annotated Section'
     description='This is an annotated section, which enables sections to have a description.'
diff --git a/src/domain/Layouts/SectionList/SectionList.test.tsx b/src/domain/Layouts/SectionList/SectionList.test.tsx
index 633eeb603..0657622df 100644
--- a/src/domain/Layouts/SectionList/SectionList.test.tsx
+++ b/src/domain/Layouts/SectionList/SectionList.test.tsx
@@ -11,6 +11,9 @@ describe('<SectionList />', () => {
         <SectionList.Section>
           section 1
         </SectionList.Section>
+        <SectionList.UnstyledSection>
+          section 2
+        </SectionList.UnstyledSection>
         <SectionList.AnnotatedSection
           header='Annotated Section'
           description='Annotated Description'
diff --git a/src/domain/Layouts/SectionList/SectionList.tsx b/src/domain/Layouts/SectionList/SectionList.tsx
index de3c2d25a..1c94b1b4d 100644
--- a/src/domain/Layouts/SectionList/SectionList.tsx
+++ b/src/domain/Layouts/SectionList/SectionList.tsx
@@ -1,19 +1,20 @@
 import React from 'react'
 import { AnnotatedSection } from './subcomponents/AnnotatedSection'
 import { TitledSection } from './subcomponents/TitledSection'
-import { StyledSection } from './style'
+import { StyledSectionWrapper, StyledSection, StyledUnstyledSection } from './style'
 
 export class SectionList extends React.Component {
   public static Section = StyledSection
+  public static UnstyledSection = StyledUnstyledSection
   public static AnnotatedSection = AnnotatedSection
   public static TitledSection = TitledSection
 
   public render (): JSX.Element | null {
     const { children } = this.props
     return (
-      <div>
+      <StyledSectionWrapper>
         {children}
-      </div>
+      </StyledSectionWrapper>
     )
   }
 }
diff --git a/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap b/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap
index 5205c85d8..6021882dd 100644
--- a/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap
+++ b/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap
@@ -2,50 +2,55 @@
 
 exports[`<SectionList /> should render a section list with a titled section without props 1`] = `
 @media only screen and (min-width:640px) {
-  .c1 {
+  .c0 {
+    margin-left: 24px;
+    margin-right: 24px;
+  }
+}
+
+@media only screen and (min-width:640px) {
+  .c2 {
     border-bottom: 1px solid #E1E6EB;
   }
 
-  .c1:last-child {
+  .c2:last-child {
     border-bottom: 0;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c0 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c1 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c2 {
+  .c3 {
     padding: 24px 16px 12px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c3 {
+  .c4 {
     padding-bottom: 12px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c3 {
+  .c4 {
     margin-right: 24px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c4 {
+  .c5 {
     padding-top: 1.5rem;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c4 {
+  .c5 {
     background-color: #FAFBFC;
     border-top: 1px solid #E1E6EB;
     border-bottom: 1px solid #E1E6EB;
@@ -54,155 +59,164 @@ exports[`<SectionList /> should render a section list with a titled section with
 }
 
 <SectionList>
-  <div>
-    <TitledSection>
-      <Styled(styled.div)>
-        <styled.div
-          className="c0"
-        >
-          <div
-            className="c0 c1"
+  <styled.div>
+    <div
+      className="c0"
+    >
+      <TitledSection>
+        <Styled(styled.div)>
+          <styled.div
+            className="c1"
           >
-            <XYGrid
-              gutterMarginX={false}
-              gutterMarginY={false}
-              gutterPaddingX={false}
-              gutterPaddingY={false}
-              vertical={false}
+            <div
+              className="c1 c2"
             >
-              <div
-                className="ihrGridX"
+              <XYGrid
+                gutterMarginX={false}
+                gutterMarginY={false}
+                gutterPaddingX={false}
+                gutterPaddingY={false}
+                vertical={false}
               >
-                <Cell
-                  size={
-                    Object {
-                      "min": 12,
-                    }
-                  }
+                <div
+                  className="ihrGridX"
                 >
-                  <div
-                    className="ihrCell min-12"
+                  <Cell
+                    size={
+                      Object {
+                        "min": 12,
+                      }
+                    }
                   >
-                    <styled.div>
-                      <div
-                        className="c2"
-                      >
-                        <XYGrid
-                          gutterMarginX={false}
-                          gutterMarginY={false}
-                          gutterPaddingX={false}
-                          gutterPaddingY={false}
-                          vertical={false}
-                          verticalAlignment="middle"
+                    <div
+                      className="ihrCell min-12"
+                    >
+                      <styled.div>
+                        <div
+                          className="c3"
                         >
-                          <div
-                            className="ihrGridX align-middle"
+                          <XYGrid
+                            gutterMarginX={false}
+                            gutterMarginY={false}
+                            gutterPaddingX={false}
+                            gutterPaddingY={false}
+                            vertical={false}
+                            verticalAlignment="middle"
                           >
-                            <Cell
-                              size={
-                                Object {
-                                  "desktop": "auto",
-                                  "min": 12,
-                                  "tablet": "auto",
-                                }
-                              }
+                            <div
+                              className="ihrGridX align-middle"
                             >
-                              <div
-                                className="ihrCell desktop-auto tablet-auto min-12"
+                              <Cell
+                                size={
+                                  Object {
+                                    "desktop": "auto",
+                                    "min": 12,
+                                    "tablet": "auto",
+                                  }
+                                }
                               >
-                                <Styled(SectionDescription)>
-                                  <SectionDescription
-                                    className="c3"
-                                  >
-                                    <div
-                                      className="c3"
-                                    />
-                                  </SectionDescription>
-                                </Styled(SectionDescription)>
-                              </div>
-                            </Cell>
-                            <Cell
-                              size={
-                                Object {
-                                  "desktop": "shrink",
-                                  "min": 12,
-                                  "tablet": "shrink",
+                                <div
+                                  className="ihrCell desktop-auto tablet-auto min-12"
+                                >
+                                  <Styled(SectionDescription)>
+                                    <SectionDescription
+                                      className="c4"
+                                    >
+                                      <div
+                                        className="c4"
+                                      />
+                                    </SectionDescription>
+                                  </Styled(SectionDescription)>
+                                </div>
+                              </Cell>
+                              <Cell
+                                size={
+                                  Object {
+                                    "desktop": "shrink",
+                                    "min": 12,
+                                    "tablet": "shrink",
+                                  }
                                 }
-                              }
-                            >
-                              <div
-                                className="ihrCell desktop-shrink tablet-shrink min-12"
-                              />
-                            </Cell>
-                          </div>
-                        </XYGrid>
-                      </div>
-                    </styled.div>
-                  </div>
-                </Cell>
-                <Cell
-                  size={
-                    Object {
-                      "min": 12,
+                              >
+                                <div
+                                  className="ihrCell desktop-shrink tablet-shrink min-12"
+                                />
+                              </Cell>
+                            </div>
+                          </XYGrid>
+                        </div>
+                      </styled.div>
+                    </div>
+                  </Cell>
+                  <Cell
+                    size={
+                      Object {
+                        "min": 12,
+                      }
                     }
-                  }
-                >
-                  <div
-                    className="ihrCell min-12"
                   >
-                    <StyledTitledSectionBody>
-                      <div
-                        className="c4"
-                      >
-                        section 1
-                      </div>
-                    </StyledTitledSectionBody>
-                  </div>
-                </Cell>
-              </div>
-            </XYGrid>
-          </div>
-        </styled.div>
-      </Styled(styled.div)>
-    </TitledSection>
-  </div>
+                    <div
+                      className="ihrCell min-12"
+                    >
+                      <StyledTitledSectionBody>
+                        <div
+                          className="c5"
+                        >
+                          section 1
+                        </div>
+                      </StyledTitledSectionBody>
+                    </div>
+                  </Cell>
+                </div>
+              </XYGrid>
+            </div>
+          </styled.div>
+        </Styled(styled.div)>
+      </TitledSection>
+    </div>
+  </styled.div>
 </SectionList>
 `;
 
 exports[`<SectionList /> should render a section list with an annotated section without props 1`] = `
 @media only screen and (min-width:640px) {
-  .c1 {
+  .c0 {
+    margin-left: 24px;
+    margin-right: 24px;
+  }
+}
+
+@media only screen and (min-width:640px) {
+  .c2 {
     border-bottom: 1px solid #E1E6EB;
   }
 
-  .c1:last-child {
+  .c2:last-child {
     border-bottom: 0;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c0 {
+  .c1 {
     padding: 24px 16px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c0 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c1 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c4 {
+  .c5 {
     margin-left: 24px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c4 {
+  .c5 {
     background-color: #FAFBFC;
     border-top: 1px solid #E1E6EB;
     border-bottom: 1px solid #E1E6EB;
@@ -211,113 +225,115 @@ exports[`<SectionList /> should render a section list with an annotated section
 }
 
 @media only screen and (max-width:639px) {
-  .c3 {
+  .c4 {
     padding: 24px 16px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c3 {
+  .c4 {
     margin-right: 24px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c2 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c3 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 <SectionList>
-  <div>
-    <Styled(styled.div)>
-      <styled.div
-        className="c0"
-      >
-        <div
-          className="c0 c1"
-        >
-          section 1
-        </div>
-      </styled.div>
-    </Styled(styled.div)>
-    <AnnotatedSection>
+  <styled.div>
+    <div
+      className="c0"
+    >
       <Styled(styled.div)>
         <styled.div
-          className="c2"
+          className="c1"
         >
           <div
-            className="c2 c1"
+            className="c1 c2"
+          >
+            section 1
+          </div>
+        </styled.div>
+      </Styled(styled.div)>
+      <AnnotatedSection>
+        <Styled(styled.div)>
+          <styled.div
+            className="c3"
           >
-            <XYGrid
-              gutterMarginX={false}
-              gutterMarginY={false}
-              gutterPaddingX={false}
-              gutterPaddingY={false}
-              vertical={false}
+            <div
+              className="c3 c2"
             >
-              <div
-                className="ihrGridX"
+              <XYGrid
+                gutterMarginX={false}
+                gutterMarginY={false}
+                gutterPaddingX={false}
+                gutterPaddingY={false}
+                vertical={false}
               >
-                <Cell
-                  size={
-                    Object {
-                      "desktop": 4,
-                      "min": 12,
-                      "tablet": 4,
-                    }
-                  }
+                <div
+                  className="ihrGridX"
                 >
-                  <div
-                    className="ihrCell desktop-4 tablet-4 min-12"
+                  <Cell
+                    size={
+                      Object {
+                        "desktop": 4,
+                        "min": 12,
+                        "tablet": 4,
+                      }
+                    }
                   >
-                    <Styled(SectionDescription)>
-                      <SectionDescription
-                        className="c3"
-                      >
-                        <div
-                          className="c3"
-                        />
-                      </SectionDescription>
-                    </Styled(SectionDescription)>
-                  </div>
-                </Cell>
-                <Cell
-                  size={
-                    Object {
-                      "desktop": 8,
-                      "min": 12,
-                      "tablet": 8,
+                    <div
+                      className="ihrCell desktop-4 tablet-4 min-12"
+                    >
+                      <Styled(SectionDescription)>
+                        <SectionDescription
+                          className="c4"
+                        >
+                          <div
+                            className="c4"
+                          />
+                        </SectionDescription>
+                      </Styled(SectionDescription)>
+                    </div>
+                  </Cell>
+                  <Cell
+                    size={
+                      Object {
+                        "desktop": 8,
+                        "min": 12,
+                        "tablet": 8,
+                      }
                     }
-                  }
-                >
-                  <div
-                    className="ihrCell desktop-8 tablet-8 min-12"
                   >
-                    <StyledAnnotatedSectionBody>
-                      <div
-                        className="c4"
-                      >
-                        section 2
-                      </div>
-                    </StyledAnnotatedSectionBody>
-                  </div>
-                </Cell>
-              </div>
-            </XYGrid>
-          </div>
-        </styled.div>
-      </Styled(styled.div)>
-    </AnnotatedSection>
-  </div>
+                    <div
+                      className="ihrCell desktop-8 tablet-8 min-12"
+                    >
+                      <StyledAnnotatedSectionBody>
+                        <div
+                          className="c5"
+                        >
+                          section 2
+                        </div>
+                      </StyledAnnotatedSectionBody>
+                    </div>
+                  </Cell>
+                </div>
+              </XYGrid>
+            </div>
+          </styled.div>
+        </Styled(styled.div)>
+      </AnnotatedSection>
+    </div>
+  </styled.div>
 </SectionList>
 `;
 
 exports[`<SectionList /> should render a sectionList 1`] = `
-.c6 {
+.c8 {
   -webkit-transition: color .25s ease-out;
   transition: color .25s ease-out;
   font-size: 14px;
@@ -328,21 +344,21 @@ exports[`<SectionList /> should render a sectionList 1`] = `
   letter-spacing: normal;
 }
 
-.c6,
-.c6:link,
-.c6:visited {
+.c8,
+.c8:link,
+.c8:visited {
   color: #432DF3;
 }
 
-.c6:hover {
+.c8:hover {
   color: #2512B3;
 }
 
-.c6:active {
+.c8:active {
   color: #0F0080;
 }
 
-.c4 {
+.c6 {
   font-size: 18px;
   line-height: 24px;
   -webkit-letter-spacing: -.02em;
@@ -353,7 +369,7 @@ exports[`<SectionList /> should render a sectionList 1`] = `
   font-weight: 600;
 }
 
-.c5 {
+.c7 {
   font-size: 14px;
   line-height: 20px;
   -webkit-letter-spacing: normal;
@@ -365,7 +381,7 @@ exports[`<SectionList /> should render a sectionList 1`] = `
   display: block;
 }
 
-.c11 {
+.c13 {
   font-size: 18px;
   line-height: 24px;
   -webkit-letter-spacing: -.02em;
@@ -376,7 +392,7 @@ exports[`<SectionList /> should render a sectionList 1`] = `
   font-weight: 600;
 }
 
-.c12 {
+.c14 {
   font-size: 14px;
   line-height: 20px;
   -webkit-letter-spacing: normal;
@@ -389,38 +405,49 @@ exports[`<SectionList /> should render a sectionList 1`] = `
 }
 
 @media only screen and (min-width:640px) {
-  .c1 {
+  .c0 {
+    margin-left: 24px;
+    margin-right: 24px;
+  }
+}
+
+@media only screen and (min-width:640px) {
+  .c2 {
     border-bottom: 1px solid #E1E6EB;
   }
 
-  .c1:last-child {
+  .c2:last-child {
     border-bottom: 0;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c0 {
+  .c3 {
+    padding: 0px 16px;
+  }
+}
+
+@media only screen and (max-width:639px) {
+  .c1 {
     padding: 24px 16px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c0 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c1 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c7 {
+  .c9 {
     margin-left: 24px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c7 {
+  .c9 {
     background-color: #FAFBFC;
     border-top: 1px solid #E1E6EB;
     border-bottom: 1px solid #E1E6EB;
@@ -429,61 +456,57 @@ exports[`<SectionList /> should render a sectionList 1`] = `
 }
 
 @media only screen and (max-width:639px) {
-  .c3 {
+  .c5 {
     padding: 24px 16px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c3 {
+  .c5 {
     margin-right: 24px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c2 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c4 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c8 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c10 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c9 {
+  .c11 {
     padding: 24px 16px 12px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c10 {
+  .c12 {
     padding-bottom: 12px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c10 {
+  .c12 {
     margin-right: 24px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c13 {
+  .c15 {
     padding-top: 1.5rem;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c13 {
+  .c15 {
     background-color: #FAFBFC;
     border-top: 1px solid #E1E6EB;
     border-bottom: 1px solid #E1E6EB;
@@ -492,69 +515,68 @@ exports[`<SectionList /> should render a sectionList 1`] = `
 }
 
 <SectionList>
-  <div>
-    <Styled(styled.div)>
-      <styled.div
-        className="c0"
-      >
-        <div
-          className="c0 c1"
-        >
-          section 1
-        </div>
-      </styled.div>
-    </Styled(styled.div)>
-    <AnnotatedSection
-      description="Annotated Description"
-      header="Annotated Section"
-      linkProps={
-        Object {
-          "href": "#",
-        }
-      }
-      linkText="Annotated Link"
+  <styled.div>
+    <div
+      className="c0"
     >
       <Styled(styled.div)>
         <styled.div
-          className="c2"
+          className="c1"
         >
           <div
-            className="c2 c1"
+            className="c1 c2"
+          >
+            section 1
+          </div>
+        </styled.div>
+      </Styled(styled.div)>
+      <styled.div>
+        <div
+          className="c3"
+        >
+          section 2
+        </div>
+      </styled.div>
+      <AnnotatedSection
+        description="Annotated Description"
+        header="Annotated Section"
+        linkProps={
+          Object {
+            "href": "#",
+          }
+        }
+        linkText="Annotated Link"
+      >
+        <Styled(styled.div)>
+          <styled.div
+            className="c4"
           >
-            <XYGrid
-              gutterMarginX={false}
-              gutterMarginY={false}
-              gutterPaddingX={false}
-              gutterPaddingY={false}
-              vertical={false}
+            <div
+              className="c4 c2"
             >
-              <div
-                className="ihrGridX"
+              <XYGrid
+                gutterMarginX={false}
+                gutterMarginY={false}
+                gutterPaddingX={false}
+                gutterPaddingY={false}
+                vertical={false}
               >
-                <Cell
-                  size={
-                    Object {
-                      "desktop": 4,
-                      "min": 12,
-                      "tablet": 4,
-                    }
-                  }
+                <div
+                  className="ihrGridX"
                 >
-                  <div
-                    className="ihrCell desktop-4 tablet-4 min-12"
-                  >
-                    <Styled(SectionDescription)
-                      description="Annotated Description"
-                      header="Annotated Section"
-                      linkProps={
-                        Object {
-                          "href": "#",
-                        }
+                  <Cell
+                    size={
+                      Object {
+                        "desktop": 4,
+                        "min": 12,
+                        "tablet": 4,
                       }
-                      linkText="Annotated Link"
+                    }
+                  >
+                    <div
+                      className="ihrCell desktop-4 tablet-4 min-12"
                     >
-                      <SectionDescription
-                        className="c3"
+                      <Styled(SectionDescription)
                         description="Annotated Description"
                         header="Annotated Section"
                         linkProps={
@@ -564,317 +586,329 @@ exports[`<SectionList /> should render a sectionList 1`] = `
                         }
                         linkText="Annotated Link"
                       >
-                        <div
-                          className="c3"
+                        <SectionDescription
+                          className="c5"
+                          description="Annotated Description"
+                          header="Annotated Section"
+                          linkProps={
+                            Object {
+                              "href": "#",
+                            }
+                          }
+                          linkText="Annotated Link"
                         >
-                          <Text
-                            color="#424F5C"
-                            isInline={true}
-                            tag="h2"
-                            type="heading"
+                          <div
+                            className="c5"
                           >
-                            <styled.h2
+                            <Text
                               color="#424F5C"
-                              data-component-type="text"
                               isInline={true}
-                              textType="heading"
+                              tag="h2"
+                              type="heading"
                             >
-                              <h2
-                                className="c4"
+                              <styled.h2
                                 color="#424F5C"
                                 data-component-type="text"
+                                isInline={true}
+                                textType="heading"
                               >
-                                Annotated Section
-                              </h2>
-                            </styled.h2>
-                          </Text>
-                          <Text
-                            color="#667380"
-                            isInline={false}
-                            tag="span"
-                            type="small"
-                          >
-                            <styled.span
+                                <h2
+                                  className="c6"
+                                  color="#424F5C"
+                                  data-component-type="text"
+                                >
+                                  Annotated Section
+                                </h2>
+                              </styled.h2>
+                            </Text>
+                            <Text
                               color="#667380"
-                              data-component-type="text"
                               isInline={false}
-                              textType="small"
+                              tag="span"
+                              type="small"
                             >
-                              <span
-                                className="c5"
+                              <styled.span
                                 color="#667380"
                                 data-component-type="text"
+                                isInline={false}
+                                textType="small"
                               >
-                                Annotated Description
-                              </span>
-                            </styled.span>
-                          </Text>
-                          <TextLink
-                            href="#"
-                            textType="small"
-                          >
-                            <Component
-                              className="c6"
+                                <span
+                                  className="c7"
+                                  color="#667380"
+                                  data-component-type="text"
+                                >
+                                  Annotated Description
+                                </span>
+                              </styled.span>
+                            </Text>
+                            <TextLink
                               href="#"
                               textType="small"
                             >
-                              <Anchor
-                                className="c6"
+                              <Component
+                                className="c8"
                                 href="#"
+                                textType="small"
                               >
-                                <a
-                                  className="c6"
+                                <Anchor
+                                  className="c8"
                                   href="#"
                                 >
-                                  Annotated Link
-                                </a>
-                              </Anchor>
-                            </Component>
-                          </TextLink>
-                        </div>
-                      </SectionDescription>
-                    </Styled(SectionDescription)>
-                  </div>
-                </Cell>
-                <Cell
-                  size={
-                    Object {
-                      "desktop": 8,
-                      "min": 12,
-                      "tablet": 8,
+                                  <a
+                                    className="c8"
+                                    href="#"
+                                  >
+                                    Annotated Link
+                                  </a>
+                                </Anchor>
+                              </Component>
+                            </TextLink>
+                          </div>
+                        </SectionDescription>
+                      </Styled(SectionDescription)>
+                    </div>
+                  </Cell>
+                  <Cell
+                    size={
+                      Object {
+                        "desktop": 8,
+                        "min": 12,
+                        "tablet": 8,
+                      }
                     }
-                  }
-                >
-                  <div
-                    className="ihrCell desktop-8 tablet-8 min-12"
                   >
-                    <StyledAnnotatedSectionBody>
-                      <div
-                        className="c7"
-                      >
-                        section 2
-                      </div>
-                    </StyledAnnotatedSectionBody>
-                  </div>
-                </Cell>
-              </div>
-            </XYGrid>
-          </div>
-        </styled.div>
-      </Styled(styled.div)>
-    </AnnotatedSection>
-    <TitledSection
-      actionItems={
-        Array [
-          <Button
-            hasLegacyMargins={false}
-            iconAlignment="left"
-            type="primary"
-          >
-            Action 1
-          </Button>,
-          <Button
-            hasLegacyMargins={false}
-            iconAlignment="left"
-            type="primary"
-          >
-            Action 2
-          </Button>,
-        ]
-      }
-      description="Titled Description"
-      header="Titled Section"
-    >
-      <Styled(styled.div)>
-        <styled.div
-          className="c8"
-        >
-          <div
-            className="c8 c1"
+                    <div
+                      className="ihrCell desktop-8 tablet-8 min-12"
+                    >
+                      <StyledAnnotatedSectionBody>
+                        <div
+                          className="c9"
+                        >
+                          section 2
+                        </div>
+                      </StyledAnnotatedSectionBody>
+                    </div>
+                  </Cell>
+                </div>
+              </XYGrid>
+            </div>
+          </styled.div>
+        </Styled(styled.div)>
+      </AnnotatedSection>
+      <TitledSection
+        actionItems={
+          Array [
+            <Button
+              hasLegacyMargins={false}
+              iconAlignment="left"
+              type="primary"
+            >
+              Action 1
+            </Button>,
+            <Button
+              hasLegacyMargins={false}
+              iconAlignment="left"
+              type="primary"
+            >
+              Action 2
+            </Button>,
+          ]
+        }
+        description="Titled Description"
+        header="Titled Section"
+      >
+        <Styled(styled.div)>
+          <styled.div
+            className="c10"
           >
-            <XYGrid
-              gutterMarginX={false}
-              gutterMarginY={false}
-              gutterPaddingX={false}
-              gutterPaddingY={false}
-              vertical={false}
+            <div
+              className="c10 c2"
             >
-              <div
-                className="ihrGridX"
+              <XYGrid
+                gutterMarginX={false}
+                gutterMarginY={false}
+                gutterPaddingX={false}
+                gutterPaddingY={false}
+                vertical={false}
               >
-                <Cell
-                  size={
-                    Object {
-                      "min": 12,
-                    }
-                  }
+                <div
+                  className="ihrGridX"
                 >
-                  <div
-                    className="ihrCell min-12"
+                  <Cell
+                    size={
+                      Object {
+                        "min": 12,
+                      }
+                    }
                   >
-                    <styled.div>
-                      <div
-                        className="c9"
-                      >
-                        <XYGrid
-                          gutterMarginX={false}
-                          gutterMarginY={false}
-                          gutterPaddingX={false}
-                          gutterPaddingY={false}
-                          vertical={false}
-                          verticalAlignment="middle"
+                    <div
+                      className="ihrCell min-12"
+                    >
+                      <styled.div>
+                        <div
+                          className="c11"
                         >
-                          <div
-                            className="ihrGridX align-middle"
+                          <XYGrid
+                            gutterMarginX={false}
+                            gutterMarginY={false}
+                            gutterPaddingX={false}
+                            gutterPaddingY={false}
+                            vertical={false}
+                            verticalAlignment="middle"
                           >
-                            <Cell
-                              size={
-                                Object {
-                                  "desktop": "auto",
-                                  "min": 12,
-                                  "tablet": "auto",
-                                }
-                              }
+                            <div
+                              className="ihrGridX align-middle"
                             >
-                              <div
-                                className="ihrCell desktop-auto tablet-auto min-12"
+                              <Cell
+                                size={
+                                  Object {
+                                    "desktop": "auto",
+                                    "min": 12,
+                                    "tablet": "auto",
+                                  }
+                                }
                               >
-                                <Styled(SectionDescription)
-                                  description="Titled Description"
-                                  header="Titled Section"
+                                <div
+                                  className="ihrCell desktop-auto tablet-auto min-12"
                                 >
-                                  <SectionDescription
-                                    className="c10"
+                                  <Styled(SectionDescription)
                                     description="Titled Description"
                                     header="Titled Section"
                                   >
-                                    <div
-                                      className="c10"
+                                    <SectionDescription
+                                      className="c12"
+                                      description="Titled Description"
+                                      header="Titled Section"
                                     >
-                                      <Text
-                                        color="#424F5C"
-                                        isInline={true}
-                                        tag="h2"
-                                        type="heading"
+                                      <div
+                                        className="c12"
                                       >
-                                        <styled.h2
+                                        <Text
                                           color="#424F5C"
-                                          data-component-type="text"
                                           isInline={true}
-                                          textType="heading"
+                                          tag="h2"
+                                          type="heading"
                                         >
-                                          <h2
-                                            className="c11"
+                                          <styled.h2
                                             color="#424F5C"
                                             data-component-type="text"
+                                            isInline={true}
+                                            textType="heading"
                                           >
-                                            Titled Section
-                                          </h2>
-                                        </styled.h2>
-                                      </Text>
-                                      <Text
-                                        color="#667380"
-                                        isInline={false}
-                                        tag="span"
-                                        type="small"
-                                      >
-                                        <styled.span
+                                            <h2
+                                              className="c13"
+                                              color="#424F5C"
+                                              data-component-type="text"
+                                            >
+                                              Titled Section
+                                            </h2>
+                                          </styled.h2>
+                                        </Text>
+                                        <Text
                                           color="#667380"
-                                          data-component-type="text"
                                           isInline={false}
-                                          textType="small"
+                                          tag="span"
+                                          type="small"
                                         >
-                                          <span
-                                            className="c12"
+                                          <styled.span
                                             color="#667380"
                                             data-component-type="text"
+                                            isInline={false}
+                                            textType="small"
                                           >
-                                            Titled Description
-                                          </span>
-                                        </styled.span>
-                                      </Text>
-                                    </div>
-                                  </SectionDescription>
-                                </Styled(SectionDescription)>
-                              </div>
-                            </Cell>
-                            <Cell
-                              size={
-                                Object {
-                                  "desktop": "shrink",
-                                  "min": 12,
-                                  "tablet": "shrink",
+                                            <span
+                                              className="c14"
+                                              color="#667380"
+                                              data-component-type="text"
+                                            >
+                                              Titled Description
+                                            </span>
+                                          </styled.span>
+                                        </Text>
+                                      </div>
+                                    </SectionDescription>
+                                  </Styled(SectionDescription)>
+                                </div>
+                              </Cell>
+                              <Cell
+                                size={
+                                  Object {
+                                    "desktop": "shrink",
+                                    "min": 12,
+                                    "tablet": "shrink",
+                                  }
                                 }
-                              }
-                            >
-                              <div
-                                className="ihrCell desktop-shrink tablet-shrink min-12"
                               >
-                                <Button
-                                  hasLegacyMargins={false}
-                                  iconAlignment="left"
-                                  key="1"
-                                  type="primary"
+                                <div
+                                  className="ihrCell desktop-shrink tablet-shrink min-12"
                                 >
-                                  <button
-                                    className="button primary"
-                                    data-component-type="button"
+                                  <Button
+                                    hasLegacyMargins={false}
+                                    iconAlignment="left"
+                                    key="1"
+                                    type="primary"
                                   >
-                                    Action 1
-                                  </button>
-                                </Button>
-                                <Button
-                                  hasLegacyMargins={false}
-                                  iconAlignment="left"
-                                  key="2"
-                                  type="primary"
-                                >
-                                  <button
-                                    className="button primary"
-                                    data-component-type="button"
+                                    <button
+                                      className="button primary"
+                                      data-component-type="button"
+                                    >
+                                      Action 1
+                                    </button>
+                                  </Button>
+                                  <Button
+                                    hasLegacyMargins={false}
+                                    iconAlignment="left"
+                                    key="2"
+                                    type="primary"
                                   >
-                                    Action 2
-                                  </button>
-                                </Button>
-                              </div>
-                            </Cell>
-                          </div>
-                        </XYGrid>
-                      </div>
-                    </styled.div>
-                  </div>
-                </Cell>
-                <Cell
-                  size={
-                    Object {
-                      "min": 12,
+                                    <button
+                                      className="button primary"
+                                      data-component-type="button"
+                                    >
+                                      Action 2
+                                    </button>
+                                  </Button>
+                                </div>
+                              </Cell>
+                            </div>
+                          </XYGrid>
+                        </div>
+                      </styled.div>
+                    </div>
+                  </Cell>
+                  <Cell
+                    size={
+                      Object {
+                        "min": 12,
+                      }
                     }
-                  }
-                >
-                  <div
-                    className="ihrCell min-12"
                   >
-                    <StyledTitledSectionBody>
-                      <div
-                        className="c13"
-                      >
-                        section 3
-                      </div>
-                    </StyledTitledSectionBody>
-                  </div>
-                </Cell>
-              </div>
-            </XYGrid>
-          </div>
-        </styled.div>
-      </Styled(styled.div)>
-    </TitledSection>
-  </div>
+                    <div
+                      className="ihrCell min-12"
+                    >
+                      <StyledTitledSectionBody>
+                        <div
+                          className="c15"
+                        >
+                          section 3
+                        </div>
+                      </StyledTitledSectionBody>
+                    </div>
+                  </Cell>
+                </div>
+              </XYGrid>
+            </div>
+          </styled.div>
+        </Styled(styled.div)>
+      </TitledSection>
+    </div>
+  </styled.div>
 </SectionList>
 `;
 
 exports[`<SectionList /> should render sectionList items with no children 1`] = `
-.c6 {
+.c7 {
   -webkit-transition: color .25s ease-out;
   transition: color .25s ease-out;
   font-size: 14px;
@@ -885,21 +919,21 @@ exports[`<SectionList /> should render sectionList items with no children 1`] =
   letter-spacing: normal;
 }
 
-.c6,
-.c6:link,
-.c6:visited {
+.c7,
+.c7:link,
+.c7:visited {
   color: #432DF3;
 }
 
-.c6:hover {
+.c7:hover {
   color: #2512B3;
 }
 
-.c6:active {
+.c7:active {
   color: #0F0080;
 }
 
-.c4 {
+.c5 {
   font-size: 18px;
   line-height: 24px;
   -webkit-letter-spacing: -.02em;
@@ -910,7 +944,7 @@ exports[`<SectionList /> should render sectionList items with no children 1`] =
   font-weight: 600;
 }
 
-.c5 {
+.c6 {
   font-size: 14px;
   line-height: 20px;
   -webkit-letter-spacing: normal;
@@ -922,7 +956,7 @@ exports[`<SectionList /> should render sectionList items with no children 1`] =
   display: block;
 }
 
-.c10 {
+.c11 {
   font-size: 18px;
   line-height: 24px;
   -webkit-letter-spacing: -.02em;
@@ -933,7 +967,7 @@ exports[`<SectionList /> should render sectionList items with no children 1`] =
   font-weight: 600;
 }
 
-.c11 {
+.c12 {
   font-size: 14px;
   line-height: 20px;
   -webkit-letter-spacing: normal;
@@ -946,140 +980,133 @@ exports[`<SectionList /> should render sectionList items with no children 1`] =
 }
 
 @media only screen and (min-width:640px) {
-  .c1 {
+  .c0 {
+    margin-left: 24px;
+    margin-right: 24px;
+  }
+}
+
+@media only screen and (min-width:640px) {
+  .c2 {
     border-bottom: 1px solid #E1E6EB;
   }
 
-  .c1:last-child {
+  .c2:last-child {
     border-bottom: 0;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c0 {
+  .c1 {
     padding: 24px 16px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c0 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c1 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c3 {
+  .c4 {
     padding: 24px 16px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c3 {
+  .c4 {
     margin-right: 24px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c2 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c3 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c7 {
-    margin-left: 24px;
-    margin-right: 24px;
+  .c8 {
     padding-top: 32px;
     padding-bottom: 32px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c8 {
+  .c9 {
     padding: 24px 16px 12px;
   }
 }
 
 @media only screen and (max-width:639px) {
-  .c9 {
+  .c10 {
     padding-bottom: 12px;
   }
 }
 
 @media only screen and (min-width:640px) {
-  .c9 {
+  .c10 {
     margin-right: 24px;
   }
 }
 
 <SectionList>
-  <div>
-    <Styled(styled.div)>
-      <styled.div
-        className="c0"
-      >
-        <div
-          className="c0 c1"
-        />
-      </styled.div>
-    </Styled(styled.div)>
-    <AnnotatedSection
-      description="Annotated Description"
-      header="Annotated Section"
-      linkProps={
-        Object {
-          "href": "#",
-        }
-      }
-      linkText="Annotated Link"
+  <styled.div>
+    <div
+      className="c0"
     >
       <Styled(styled.div)>
         <styled.div
-          className="c2"
+          className="c1"
         >
           <div
-            className="c2 c1"
+            className="c1 c2"
+          />
+        </styled.div>
+      </Styled(styled.div)>
+      <AnnotatedSection
+        description="Annotated Description"
+        header="Annotated Section"
+        linkProps={
+          Object {
+            "href": "#",
+          }
+        }
+        linkText="Annotated Link"
+      >
+        <Styled(styled.div)>
+          <styled.div
+            className="c3"
           >
-            <XYGrid
-              gutterMarginX={false}
-              gutterMarginY={false}
-              gutterPaddingX={false}
-              gutterPaddingY={false}
-              vertical={false}
+            <div
+              className="c3 c2"
             >
-              <div
-                className="ihrGridX"
+              <XYGrid
+                gutterMarginX={false}
+                gutterMarginY={false}
+                gutterPaddingX={false}
+                gutterPaddingY={false}
+                vertical={false}
               >
-                <Cell
-                  size={
-                    Object {
-                      "desktop": 4,
-                      "min": 12,
-                      "tablet": 4,
-                    }
-                  }
+                <div
+                  className="ihrGridX"
                 >
-                  <div
-                    className="ihrCell desktop-4 tablet-4 min-12"
-                  >
-                    <Styled(SectionDescription)
-                      description="Annotated Description"
-                      header="Annotated Section"
-                      linkProps={
-                        Object {
-                          "href": "#",
-                        }
+                  <Cell
+                    size={
+                      Object {
+                        "desktop": 4,
+                        "min": 12,
+                        "tablet": 4,
                       }
-                      linkText="Annotated Link"
+                    }
+                  >
+                    <div
+                      className="ihrCell desktop-4 tablet-4 min-12"
                     >
-                      <SectionDescription
-                        className="c3"
+                      <Styled(SectionDescription)
                         description="Annotated Description"
                         header="Annotated Section"
                         linkProps={
@@ -1089,271 +1116,283 @@ exports[`<SectionList /> should render sectionList items with no children 1`] =
                         }
                         linkText="Annotated Link"
                       >
-                        <div
-                          className="c3"
+                        <SectionDescription
+                          className="c4"
+                          description="Annotated Description"
+                          header="Annotated Section"
+                          linkProps={
+                            Object {
+                              "href": "#",
+                            }
+                          }
+                          linkText="Annotated Link"
                         >
-                          <Text
-                            color="#424F5C"
-                            isInline={true}
-                            tag="h2"
-                            type="heading"
+                          <div
+                            className="c4"
                           >
-                            <styled.h2
+                            <Text
                               color="#424F5C"
-                              data-component-type="text"
                               isInline={true}
-                              textType="heading"
+                              tag="h2"
+                              type="heading"
                             >
-                              <h2
-                                className="c4"
+                              <styled.h2
                                 color="#424F5C"
                                 data-component-type="text"
+                                isInline={true}
+                                textType="heading"
                               >
-                                Annotated Section
-                              </h2>
-                            </styled.h2>
-                          </Text>
-                          <Text
-                            color="#667380"
-                            isInline={false}
-                            tag="span"
-                            type="small"
-                          >
-                            <styled.span
+                                <h2
+                                  className="c5"
+                                  color="#424F5C"
+                                  data-component-type="text"
+                                >
+                                  Annotated Section
+                                </h2>
+                              </styled.h2>
+                            </Text>
+                            <Text
                               color="#667380"
-                              data-component-type="text"
                               isInline={false}
-                              textType="small"
+                              tag="span"
+                              type="small"
                             >
-                              <span
-                                className="c5"
+                              <styled.span
                                 color="#667380"
                                 data-component-type="text"
+                                isInline={false}
+                                textType="small"
                               >
-                                Annotated Description
-                              </span>
-                            </styled.span>
-                          </Text>
-                          <TextLink
-                            href="#"
-                            textType="small"
-                          >
-                            <Component
-                              className="c6"
+                                <span
+                                  className="c6"
+                                  color="#667380"
+                                  data-component-type="text"
+                                >
+                                  Annotated Description
+                                </span>
+                              </styled.span>
+                            </Text>
+                            <TextLink
                               href="#"
                               textType="small"
                             >
-                              <Anchor
-                                className="c6"
+                              <Component
+                                className="c7"
                                 href="#"
+                                textType="small"
                               >
-                                <a
-                                  className="c6"
+                                <Anchor
+                                  className="c7"
                                   href="#"
                                 >
-                                  Annotated Link
-                                </a>
-                              </Anchor>
-                            </Component>
-                          </TextLink>
-                        </div>
-                      </SectionDescription>
-                    </Styled(SectionDescription)>
-                  </div>
-                </Cell>
-              </div>
-            </XYGrid>
-          </div>
-        </styled.div>
-      </Styled(styled.div)>
-    </AnnotatedSection>
-    <TitledSection
-      actionItems={
-        Array [
-          <Button
-            hasLegacyMargins={false}
-            iconAlignment="left"
-            type="primary"
-          >
-            Action 1
-          </Button>,
-          <Button
-            hasLegacyMargins={false}
-            iconAlignment="left"
-            type="primary"
-          >
-            Action 2
-          </Button>,
-        ]
-      }
-      description="Titled Description"
-      header="Titled Section"
-    >
-      <Styled(styled.div)>
-        <styled.div
-          className="c7"
-        >
-          <div
-            className="c7 c1"
+                                  <a
+                                    className="c7"
+                                    href="#"
+                                  >
+                                    Annotated Link
+                                  </a>
+                                </Anchor>
+                              </Component>
+                            </TextLink>
+                          </div>
+                        </SectionDescription>
+                      </Styled(SectionDescription)>
+                    </div>
+                  </Cell>
+                </div>
+              </XYGrid>
+            </div>
+          </styled.div>
+        </Styled(styled.div)>
+      </AnnotatedSection>
+      <TitledSection
+        actionItems={
+          Array [
+            <Button
+              hasLegacyMargins={false}
+              iconAlignment="left"
+              type="primary"
+            >
+              Action 1
+            </Button>,
+            <Button
+              hasLegacyMargins={false}
+              iconAlignment="left"
+              type="primary"
+            >
+              Action 2
+            </Button>,
+          ]
+        }
+        description="Titled Description"
+        header="Titled Section"
+      >
+        <Styled(styled.div)>
+          <styled.div
+            className="c8"
           >
-            <XYGrid
-              gutterMarginX={false}
-              gutterMarginY={false}
-              gutterPaddingX={false}
-              gutterPaddingY={false}
-              vertical={false}
+            <div
+              className="c8 c2"
             >
-              <div
-                className="ihrGridX"
+              <XYGrid
+                gutterMarginX={false}
+                gutterMarginY={false}
+                gutterPaddingX={false}
+                gutterPaddingY={false}
+                vertical={false}
               >
-                <Cell
-                  size={
-                    Object {
-                      "min": 12,
-                    }
-                  }
+                <div
+                  className="ihrGridX"
                 >
-                  <div
-                    className="ihrCell min-12"
+                  <Cell
+                    size={
+                      Object {
+                        "min": 12,
+                      }
+                    }
                   >
-                    <styled.div>
-                      <div
-                        className="c8"
-                      >
-                        <XYGrid
-                          gutterMarginX={false}
-                          gutterMarginY={false}
-                          gutterPaddingX={false}
-                          gutterPaddingY={false}
-                          vertical={false}
-                          verticalAlignment="middle"
+                    <div
+                      className="ihrCell min-12"
+                    >
+                      <styled.div>
+                        <div
+                          className="c9"
                         >
-                          <div
-                            className="ihrGridX align-middle"
+                          <XYGrid
+                            gutterMarginX={false}
+                            gutterMarginY={false}
+                            gutterPaddingX={false}
+                            gutterPaddingY={false}
+                            vertical={false}
+                            verticalAlignment="middle"
                           >
-                            <Cell
-                              size={
-                                Object {
-                                  "desktop": "auto",
-                                  "min": 12,
-                                  "tablet": "auto",
-                                }
-                              }
+                            <div
+                              className="ihrGridX align-middle"
                             >
-                              <div
-                                className="ihrCell desktop-auto tablet-auto min-12"
+                              <Cell
+                                size={
+                                  Object {
+                                    "desktop": "auto",
+                                    "min": 12,
+                                    "tablet": "auto",
+                                  }
+                                }
                               >
-                                <Styled(SectionDescription)
-                                  description="Titled Description"
-                                  header="Titled Section"
+                                <div
+                                  className="ihrCell desktop-auto tablet-auto min-12"
                                 >
-                                  <SectionDescription
-                                    className="c9"
+                                  <Styled(SectionDescription)
                                     description="Titled Description"
                                     header="Titled Section"
                                   >
-                                    <div
-                                      className="c9"
+                                    <SectionDescription
+                                      className="c10"
+                                      description="Titled Description"
+                                      header="Titled Section"
                                     >
-                                      <Text
-                                        color="#424F5C"
-                                        isInline={true}
-                                        tag="h2"
-                                        type="heading"
+                                      <div
+                                        className="c10"
                                       >
-                                        <styled.h2
+                                        <Text
                                           color="#424F5C"
-                                          data-component-type="text"
                                           isInline={true}
-                                          textType="heading"
+                                          tag="h2"
+                                          type="heading"
                                         >
-                                          <h2
-                                            className="c10"
+                                          <styled.h2
                                             color="#424F5C"
                                             data-component-type="text"
+                                            isInline={true}
+                                            textType="heading"
                                           >
-                                            Titled Section
-                                          </h2>
-                                        </styled.h2>
-                                      </Text>
-                                      <Text
-                                        color="#667380"
-                                        isInline={false}
-                                        tag="span"
-                                        type="small"
-                                      >
-                                        <styled.span
+                                            <h2
+                                              className="c11"
+                                              color="#424F5C"
+                                              data-component-type="text"
+                                            >
+                                              Titled Section
+                                            </h2>
+                                          </styled.h2>
+                                        </Text>
+                                        <Text
                                           color="#667380"
-                                          data-component-type="text"
                                           isInline={false}
-                                          textType="small"
+                                          tag="span"
+                                          type="small"
                                         >
-                                          <span
-                                            className="c11"
+                                          <styled.span
                                             color="#667380"
                                             data-component-type="text"
+                                            isInline={false}
+                                            textType="small"
                                           >
-                                            Titled Description
-                                          </span>
-                                        </styled.span>
-                                      </Text>
-                                    </div>
-                                  </SectionDescription>
-                                </Styled(SectionDescription)>
-                              </div>
-                            </Cell>
-                            <Cell
-                              size={
-                                Object {
-                                  "desktop": "shrink",
-                                  "min": 12,
-                                  "tablet": "shrink",
+                                            <span
+                                              className="c12"
+                                              color="#667380"
+                                              data-component-type="text"
+                                            >
+                                              Titled Description
+                                            </span>
+                                          </styled.span>
+                                        </Text>
+                                      </div>
+                                    </SectionDescription>
+                                  </Styled(SectionDescription)>
+                                </div>
+                              </Cell>
+                              <Cell
+                                size={
+                                  Object {
+                                    "desktop": "shrink",
+                                    "min": 12,
+                                    "tablet": "shrink",
+                                  }
                                 }
-                              }
-                            >
-                              <div
-                                className="ihrCell desktop-shrink tablet-shrink min-12"
                               >
-                                <Button
-                                  hasLegacyMargins={false}
-                                  iconAlignment="left"
-                                  key="1"
-                                  type="primary"
+                                <div
+                                  className="ihrCell desktop-shrink tablet-shrink min-12"
                                 >
-                                  <button
-                                    className="button primary"
-                                    data-component-type="button"
+                                  <Button
+                                    hasLegacyMargins={false}
+                                    iconAlignment="left"
+                                    key="1"
+                                    type="primary"
                                   >
-                                    Action 1
-                                  </button>
-                                </Button>
-                                <Button
-                                  hasLegacyMargins={false}
-                                  iconAlignment="left"
-                                  key="2"
-                                  type="primary"
-                                >
-                                  <button
-                                    className="button primary"
-                                    data-component-type="button"
+                                    <button
+                                      className="button primary"
+                                      data-component-type="button"
+                                    >
+                                      Action 1
+                                    </button>
+                                  </Button>
+                                  <Button
+                                    hasLegacyMargins={false}
+                                    iconAlignment="left"
+                                    key="2"
+                                    type="primary"
                                   >
-                                    Action 2
-                                  </button>
-                                </Button>
-                              </div>
-                            </Cell>
-                          </div>
-                        </XYGrid>
-                      </div>
-                    </styled.div>
-                  </div>
-                </Cell>
-              </div>
-            </XYGrid>
-          </div>
-        </styled.div>
-      </Styled(styled.div)>
-    </TitledSection>
-  </div>
+                                    <button
+                                      className="button primary"
+                                      data-component-type="button"
+                                    >
+                                      Action 2
+                                    </button>
+                                  </Button>
+                                </div>
+                              </Cell>
+                            </div>
+                          </XYGrid>
+                        </div>
+                      </styled.div>
+                    </div>
+                  </Cell>
+                </div>
+              </XYGrid>
+            </div>
+          </styled.div>
+        </Styled(styled.div)>
+      </TitledSection>
+    </div>
+  </styled.div>
 </SectionList>
 `;
diff --git a/src/domain/Layouts/SectionList/style.ts b/src/domain/Layouts/SectionList/style.ts
index b1fe70c69..6d726e8f3 100644
--- a/src/domain/Layouts/SectionList/style.ts
+++ b/src/domain/Layouts/SectionList/style.ts
@@ -7,7 +7,14 @@ const verticalPaddingDesktop = 32
 const horizontalPaddingMobile = 16
 const verticalPaddingMobile = 24
 
-const SectionBorder = styled.div`
+const StyledSectionWrapper = styled.div`  
+  @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) {
+    margin-left: ${horizontalMarginDesktop}px;
+    margin-right: ${horizontalMarginDesktop}px;
+  }
+`
+
+const SectionBorder = styled.div`  
   @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) {
      border-bottom: 1px solid ${Variables.Color.n300};
 
@@ -17,14 +24,18 @@ const SectionBorder = styled.div`
   }
 `
 
-const StyledSection = styled(SectionBorder)`
+const StyledUnstyledSection = styled.div`  
+  @media only screen and (max-width: ${Variables.Breakpoint.breakpointTablet - 1}px) {
+    padding: 0px ${horizontalPaddingMobile}px;
+  }
+`
+
+const StyledSection = styled(SectionBorder)`  
   @media only screen and (max-width: ${Variables.Breakpoint.breakpointTablet - 1}px) {
     padding: ${verticalPaddingMobile}px ${horizontalPaddingMobile}px;
   }
 
   @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) {
-    margin-left: ${horizontalMarginDesktop}px;
-    margin-right: ${horizontalMarginDesktop}px;
     padding-top: ${verticalPaddingDesktop}px;
     padding-bottom: ${verticalPaddingDesktop}px;
   }
@@ -55,8 +66,6 @@ const StyledAnnotatedSectionDescription = styled(SectionDescription)`
 
 const StyledAnnotatedSection = styled(SectionBorder)`
   @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) {
-    margin-left: ${horizontalMarginDesktop}px;
-    margin-right: ${horizontalMarginDesktop}px;
     padding-top: ${verticalPaddingDesktop}px;
     padding-bottom: ${verticalPaddingDesktop}px;
   }
@@ -64,8 +73,6 @@ const StyledAnnotatedSection = styled(SectionBorder)`
 
 const StyledTitledSection = styled(SectionBorder)`
   @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) {
-    margin-left: ${horizontalMarginDesktop}px;
-    margin-right: ${horizontalMarginDesktop}px;
     padding-top: ${verticalPaddingDesktop}px;
     padding-bottom: ${verticalPaddingDesktop}px;
   }
@@ -112,5 +119,7 @@ export {
   StyledTitledSection,
   StyledTitledSectionHeaderRow,
   StyledTitledSectionDescription,
-  StyledTitledSectionBody
+  StyledTitledSectionBody,
+  StyledSectionWrapper,
+  StyledUnstyledSection
 }
diff --git a/src/domain/Typographies/Brick/Brick.examples.md b/src/domain/Typographies/Brick/Brick.examples.md
index ac398e0fa..421be7bef 100644
--- a/src/domain/Typographies/Brick/Brick.examples.md
+++ b/src/domain/Typographies/Brick/Brick.examples.md
@@ -2,44 +2,14 @@
 
 ```jsx
 <div>
-  <Brick
-    text='Alert!!!'
-    color='alert'
-  />
-
-  <Brick
-    text='Success'
-    color='success'
-  />
-
-  <Brick
-    text='Warning!'
-    color='warning'
-  />
-
-  <Brick
-    text='Primary'
-    color='primary'
-  />
-
-  <Brick
-    text='Neutral (default)'
-    color='neutral'
-  />
-
-  <Brick
-    text='Secondary'
-    color='secondary'
-  />
-
-  <Brick
-    text='Highlight'
-    color='highlight'
-  />
-  <Brick
-    text='Dark'
-    color='dark'
-  />
+  <Brick color='alert'>Alert!!!</Brick>
+  <Brick color='success'>Success</Brick>
+  <Brick color='warning'>Warning!</Brick>
+  <Brick color='primary'>Primary</Brick>
+  <Brick color='neutral'>Neutral (default)</Brick>
+  <Brick color='secondary'>Secondary</Brick>
+  <Brick color='highlight'>Highlight</Brick>
+  <Brick color='dark'>Dark</Brick>
 </div>
 ```
 
@@ -49,45 +19,51 @@
 <div>
   <div>
     <Brick
-      text='X-Small'
       color='dark'
       typographyType='xsmall'
-    />
+    >
+      X-Small
+    </Brick>
   </div>
   <div>
     <Brick
-      text='Small'
       color='dark'
       typographyType='small'
-    />
+    >
+      Small
+    </Brick>
   </div>
   <div>
     <Brick
-      text='Body (default)'
       color='dark'
       typographyType='body'
-    />
+    >
+      Body (default)
+    </Brick>
   </div>
   <div>
     <Brick
-      text='Heading'
       color='dark'
       typographyType='heading'
-    />
+    >
+      Heading
+    </Brick>
   </div>
   <div>
     <Brick
-      text='Display'
       color='dark'
       typographyType='display'
-    />
+    >
+      Display
+    </Brick>
   </div>
   <div>
     <Brick
-      text='Display Large'
       color='dark'
       typographyType='display-large'
-    />
+    >
+      display-large
+    </Brick>
   </div>
 </div>
 ```
diff --git a/src/domain/Typographies/Brick/Brick.test.tsx b/src/domain/Typographies/Brick/Brick.test.tsx
index 7ad19cf30..1b555c25c 100644
--- a/src/domain/Typographies/Brick/Brick.test.tsx
+++ b/src/domain/Typographies/Brick/Brick.test.tsx
@@ -7,8 +7,9 @@ describe('<Brick />', () => {
   it('should render a Brick with default values', () => {
     const wrapper = shallow(
       <Brick
-        text='Test'
-      />
+      >
+        Test
+      </Brick>
     )
 
     expect(wrapper).toMatchSnapshot()
@@ -17,9 +18,10 @@ describe('<Brick />', () => {
   it('should render a Brick with the alert color', () => {
     const wrapper = shallow(
       <Brick
-        text='Test'
-        color={Props.FunctionalColor.Alert}
-      />
+        color={Brick.Color.Alert}
+      >
+        Test
+      </Brick>
     )
 
     expect(wrapper).toMatchSnapshot()
@@ -28,9 +30,10 @@ describe('<Brick />', () => {
   it('should render a Brick with the heading typography', () => {
     const wrapper = shallow(
       <Brick
-        text='Test'
         typographyType={Props.TypographyType.Heading}
-      />
+      >
+        Test
+      </Brick>
     )
 
     expect(wrapper).toMatchSnapshot()
diff --git a/src/domain/Typographies/Brick/Brick.tsx b/src/domain/Typographies/Brick/Brick.tsx
index 56f872c13..bae7857d6 100644
--- a/src/domain/Typographies/Brick/Brick.tsx
+++ b/src/domain/Typographies/Brick/Brick.tsx
@@ -1,13 +1,10 @@
 import React from 'react'
-import { Props, Variables } from '../../../common'
-import { BrickWrapper } from './style'
-import { Text } from '../Text'
+import { Props } from '../../../common'
+import { BrickColor, BrickWrapper } from './style'
 
 export interface IBrickProps {
-  /** Text to show inside the Brick  */
-  text: string
   /** Color of the brick  */
-  color?: Props.FunctionalColor
+  color?: BrickColor
   /** Specify the type of typography to use */
   typographyType?: Props.TypographyType
   /** Extra classes to apply */
@@ -17,35 +14,30 @@ export interface IBrickProps {
 }
 
 export class Brick extends React.PureComponent<IBrickProps> {
+  public static Color = BrickColor
   public static defaultProps: Partial<IBrickProps> = {
-    color: Props.FunctionalColor.Neutral,
+    color: BrickColor.Neutral,
     typographyType: Props.TypographyType.Body
   }
 
   public render (): JSX.Element {
     const {
-      text,
       color,
       typographyType,
       className,
-      componentContext
+      componentContext,
+      children
     } = this.props
 
-    const brickColors = Variables.functionalColors[color!]
-
     return (
       <BrickWrapper
-        color={brickColors.backgroundColor}
+        color={color!}
         className={className}
+        typographyType={typographyType!}
         data-component-type={Props.ComponentType.Brick}
         data-component-context={componentContext}
       >
-        <Text
-          type={typographyType}
-          color={brickColors.textColor}
-        >
-          {text}
-        </Text>
+        {children}
       </BrickWrapper>
     )
   }
diff --git a/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap b/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap
index e3a3d047f..722980920 100644
--- a/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap
+++ b/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap
@@ -2,48 +2,30 @@
 
 exports[`<Brick /> should render a Brick with default values 1`] = `
 <styled.span
-  color="#F5F7FA"
+  color="neutral"
   data-component-type="brick"
+  typographyType="body"
 >
-  <Text
-    color="#262D33"
-    isInline={true}
-    tag="span"
-    type="body"
-  >
-    Test
-  </Text>
+  Test
 </styled.span>
 `;
 
 exports[`<Brick /> should render a Brick with the alert color 1`] = `
 <styled.span
-  color="#FFF1F0"
+  color="alert"
   data-component-type="brick"
+  typographyType="body"
 >
-  <Text
-    color="#B30F00"
-    isInline={true}
-    tag="span"
-    type="body"
-  >
-    Test
-  </Text>
+  Test
 </styled.span>
 `;
 
 exports[`<Brick /> should render a Brick with the heading typography 1`] = `
 <styled.span
-  color="#F5F7FA"
+  color="neutral"
   data-component-type="brick"
+  typographyType="heading"
 >
-  <Text
-    color="#262D33"
-    isInline={true}
-    tag="span"
-    type="heading"
-  >
-    Test
-  </Text>
+  Test
 </styled.span>
 `;
diff --git a/src/domain/Typographies/Brick/style.ts b/src/domain/Typographies/Brick/style.ts
index 20771fb60..6054573a1 100644
--- a/src/domain/Typographies/Brick/style.ts
+++ b/src/domain/Typographies/Brick/style.ts
@@ -1,19 +1,77 @@
 import styled, { css } from 'styled-components'
-import { Variables } from '../../../common'
+import { Props, Variables } from '../../../common'
+import { styleForTypographyType } from '../services/textStyles'
 
-export interface IBrickWrapperProps {
-  color: Variables.Color
+interface IBrickWrapperProps {
+  /** Color of the brick  */
+  color: BrickColor
+  /** Specify the type of typography to use */
+  typographyType: Props.TypographyType
 }
 
-export const BrickWrapper = styled.span`
+enum BrickColor {
+  Alert = 'alert',
+  Success = 'success',
+  Warning = 'warning',
+  Primary = 'primary',
+  Neutral = 'neutral',
+  Secondary = 'secondary',
+  Highlight = 'highlight',
+  Dark = 'dark'
+}
+
+const colors = {
+  [BrickColor.Alert]: {
+    textColor: Variables.Color.r600,
+    backgroundColor: Variables.Color.r100
+  },
+  [BrickColor.Success]: {
+    textColor: Variables.Color.g600,
+    backgroundColor: Variables.Color.g100
+  },
+  [BrickColor.Warning]: {
+    textColor: Variables.Color.o600,
+    backgroundColor: Variables.Color.o100
+  },
+  [BrickColor.Primary]: {
+    textColor: Variables.Color.i600,
+    backgroundColor: Variables.Color.i100
+  },
+  [BrickColor.Neutral]: {
+    textColor: Variables.Color.n800,
+    backgroundColor: Variables.Color.n200
+  },
+  [BrickColor.Secondary]: {
+    textColor: Variables.Color.b600,
+    backgroundColor: Variables.Color.b100
+  },
+  [BrickColor.Highlight]: {
+    textColor: Variables.Color.c600,
+    backgroundColor: Variables.Color.c100
+  },
+  [BrickColor.Dark]: {
+    textColor: Variables.Color.n200,
+    backgroundColor: Variables.Color.n700
+  }
+}
+
+const BrickWrapper = styled.span<IBrickWrapperProps>`
   border-radius: ${Variables.Style.borderRadius}px;
   padding: 2px 4px;
-  display: inline-block;
   word-break: break-word;
 
+  ${(props: IBrickWrapperProps) => styleForTypographyType(props.typographyType)}
   ${(props: IBrickWrapperProps) => {
-    return css`
-      background: ${props.color};
+    const color = colors[props.color]
+    return css `
+      background: ${color.backgroundColor};
+      color: ${color.textColor};
     `
   }}
 `
+
+export {
+  BrickColor,
+  BrickWrapper,
+  IBrickWrapperProps
+}