Add Markdown guidance on using Notes and Alerts (#334)

Author: frankieroberto

app/guide/using-markdown.md

@@ -8,6 +8,8 @@ eleventyNavigation:
 
 Posts within this design history website are written using [Markdown](https://en.wikipedia.org/wiki/Markdown), a simple markup language which saves you from having to use HTML.
 
+[[toc]]
+
 ## Paragraphs
 
 You don’t have to do anything special for paragraphs, except for making sure that there is an empty line between each one.
@@ -177,6 +179,64 @@ These are the questions we included in the survey:
 | Consent for future contact | Boolean | Required |
 ```
 
+## Notes
+
+Notes can be used emphasise important information or to highlight content that has a different context from the rest of your post.
+
+To add a note, start each line with a `>` character, and add `> [!NOTE]` on the line immediately above:
+
+```markdown
+> [!NOTE]
+> In the UK, 1 in 5 people is disabled.
+>
+> This can equate to more than [16 million](https://commonslibrary.parliament.uk/research-briefings/cbp-9602/) people with disabilities
+```
+
+This will display as:
+
+> [!NOTE]
+> In the UK, 1 in 5 people is disabled.
+>
+> This can equate to more than [16 million](https://commonslibrary.parliament.uk/research-briefings/cbp-9602/) people with disabilities
+
+You can also include a title:
+
+```markdown
+> [!NOTE] Help take part in research
+> We’d like to spend 20 minutes talking to you about your experiences.
+```
+
+The rendered output looks like this:
+
+> [!NOTE] Help take part in research
+> We’d like to spend 20 minutes talking to you about your experiences.
+
+## Alerts
+
+Alerts are rendered as [warning callouts](https://service-manual.nhs.uk/design-system/components/warning-callout):
+
+```markdown
+> [!IMPORTANT]
+> This assumption has not yet been validated.
+```
+
+This displays as:
+
+> [!IMPORTANT]
+> This assumption has not yet been validated.
+
+If you include a title, this will be shown in the heading instead:
+
+```markdown
+> [!IMPORTANT] Clinical note
+> This guidance was based on information in the Patient Group Direction (PGD).
+```
+
+This displays as:
+
+> [!IMPORTANT] Clinical note
+> This guidance was based on information in the Patient Group Direction (PGD).
+
 ---
 
 See [NHS.UK Eleventy markdown guide](https://x-govuk.github.io/nhsuk-eleventy-plugin/example/markdown/) for the full list of options.