From 770bf07f5bf8c394cbb358f93cb1d9962839cb17 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 7 Feb 2024 10:29:09 +0100
Subject: [PATCH] Move hero section docs to the top

---
 templates/docs/patterns/section.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/templates/docs/patterns/section.md b/templates/docs/patterns/section.md
index a27294c7f..b56aadcf9 100644
--- a/templates/docs/patterns/section.md
+++ b/templates/docs/patterns/section.md
@@ -6,6 +6,14 @@ context:
 
 Use section components to wrap around parts of content on the page. They are used for managing the bottom space after each element.
 
+## Hero sections
+
+Use a hero section component (`.p-section--hero`) to create a hero section with top padding to be placed at the top of the page.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/section/hero" class="js-example">
+View example of the hero section
+</a></div>
+
 ## Regular sections
 
 Use a section component (`.p-section`) for displaying subsequent sections on the page on a same background. They should be used in place of strips for most of the standard page content.
@@ -55,14 +63,6 @@ Please not that to emphasize the sections of the page with both top and bottom s
 View example of the shallow section
 </a></div>
 
-## Hero sections
-
-Use a hero section component (`.p-section--hero`) to create a hero section with top padding to be placed at the top of the page.
-
-<div class="embedded-example"><a href="/docs/examples/patterns/section/hero" class="js-example">
-View example of the hero section
-</a></div>
-
 ## Import
 
 To import just this component into your project, copy the snippet below and include it in your main Sass file.