[Don't merge] POC: Subheadings usage

content/components/subhead.mdx

@@ -11,3 +11,51 @@ import {Link as GatsbyLink} from 'gatsby'
 export default ComponentLayout
 
 For subhead component guidelines, see [pagehead](/components/pagehead).
+
+## Usage
+
+On usual cases, subheadings should always have a borderline. However, there are some cases where they should be avoided.
+
+### Full width bordered sections 
+
+If the heading is followed by a single full width card/section, the borderline should not be used.
+
+<DoDontContainer>
+  <Do>
+    <img
+      width="464"
+      alt=""
+      src="https://github.com/primer/design/assets/8143661/f6a583d4-585a-42ff-a27c-d9dcfd3db87e"
+    />
+    <Caption>Remove the borderline for the subheading.</Caption>
+  </Do>
+  <Dont>
+    <img
+      width="464"
+      alt=""
+      src="https://github.com/primer/design/assets/8143661/8b0d0ee2-9299-4b48-ac8a-51e16be88435"
+    />
+    <Caption>Avoid duplicating the line when a bordered section is present.</Caption>
+  </Dont>
+</DoDontContainer>
+
+### With search input or filter text
+
+If the heading is followed by a search input or filter text, the borderline should not be used.
+
+<DoDontContainer>
+  <Do>
+    <img
+      width="464"
+      alt=""
+      src="https://github.com/primer/design/assets/8143661/7a4e1dda-61db-40db-ae07-f0f15d82b966"
+    />
+  </Do>
+  <Dont>
+    <img
+      width="464"
+      alt=""
+      src="https://github.com/primer/design/assets/8143661/6a4399bf-26a4-4118-8120-4563eeeb9ed6"
+    />
+  </Dont>
+</DoDontContainer>