diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index 7871f823e..064149e12 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
@@ -42,10 +43,10 @@ const ReferenceTemplate = ({ data }) => {
 
             {componentData && componentData.__docs__ && (
               <>
-                <div className={styles.description}>
+                <section className={cx(styles.section, styles.description)}>
                   <ReactMarkdown source={componentData.__docs__.text} />
-                </div>
-                <section className={styles.examples}>
+                </section>
+                <section className={styles.section}>
                   <h2>Examples</h2>
                   <div>
                     {examples.map((example, i) => (
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
index bc7623ba3..9fae46347 100644
--- a/src/templates/ReferenceTemplate.module.scss
+++ b/src/templates/ReferenceTemplate.module.scss
@@ -36,6 +36,6 @@
   }
 }
 
-.examples {
-  margin-top: 2rem;
+.section:not(:last-child) {
+  margin-bottom: 2rem;
 }