diff --git a/packages/website/mdx/guides/page-template.mdx b/packages/website/mdx/guides/page-template.mdx
index 123b9282fe..8c66e0ab29 100644
--- a/packages/website/mdx/guides/page-template.mdx
+++ b/packages/website/mdx/guides/page-template.mdx
@@ -1,6 +1,6 @@
 # Sol-coverage
 
-Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
+Sol-coverage <Note heading="Test note">This is a side-info callout used to explain things a little more when needed</Note> uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
 
 The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot.
 
diff --git a/packages/website/ts/components/docs/mdx/note.tsx b/packages/website/ts/components/docs/mdx/note.tsx
index b968f1077e..23572bf9da 100644
--- a/packages/website/ts/components/docs/mdx/note.tsx
+++ b/packages/website/ts/components/docs/mdx/note.tsx
@@ -1,24 +1,29 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
 
 export interface INoteProps {
-    heading: string;
+    children?: React.ReactNode;
     description?: string;
+    heading?: string;
 }
 
-export const Note: React.FC<INoteProps> = props => (
+export const Note: React.FC<INoteProps> = ({ children, description, heading }) => (
     <NoteWrapper>
-        <Heading asElement="h4" color={colors.brandDark} size={17} marginBottom="6px">
-            {props.heading}
-        </Heading>
-        <Description>{props.description}</Description>
+        {heading && <NoteHeading>{heading}</NoteHeading>}
+        <Description>{description || children}</Description>
     </NoteWrapper>
 );
 
-const NoteWrapper = styled.div`
+const NoteHeading = styled.strong`
+    display: block;
+    font-size: 17px,
+    margin-bottom: 10px;
+    color: ${colors.brandDark};
+`;
+
+const NoteWrapper = styled.span`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 20px 14px;
@@ -28,7 +33,7 @@ const NoteWrapper = styled.div`
     margin-bottom: 30px;
 `;
 
-const Description = styled(Paragraph)`
+const Description = styled.span`
     font-size: 0.88rem;
     margin-bottom: 0;
     line-height: 1.4;
diff --git a/packages/website/ts/pages/docs/page.tsx b/packages/website/ts/pages/docs/page.tsx
index be3367da07..9042c24ad8 100644
--- a/packages/website/ts/pages/docs/page.tsx
+++ b/packages/website/ts/pages/docs/page.tsx
@@ -13,6 +13,7 @@ import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
 import { InlineCode } from 'ts/components/docs/mdx/inline_code';
 import { InlineLink } from 'ts/components/docs/mdx/inline_link';
 import { NewsletterWidget } from 'ts/components/docs/mdx/newsletter_widget';
+import { Note } from 'ts/components/docs/mdx/note';
 import { Notification } from 'ts/components/docs/mdx/notification';
 import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
 import { Table } from 'ts/components/docs/mdx/table';
@@ -153,5 +154,6 @@ const mdxComponents = {
     Animation,
     CodeTabs,
     NewsletterWidget,
+    Note,
     Notification,
 };
diff --git a/packages/website/ts/utils/algolia_meta.json b/packages/website/ts/utils/algolia_meta.json
index 03f2f7021f..00cebc10bb 100644
--- a/packages/website/ts/utils/algolia_meta.json
+++ b/packages/website/ts/utils/algolia_meta.json
@@ -91,4 +91,4 @@
         "path": "tools/ethereum-types/v2.1.4/reference.mdx",
         "versions": ["v2.1.4"]
     }
-}
+}
\ No newline at end of file