diff --git a/apps/docs/content/components/River/index.mdx b/apps/docs/content/components/River/index.mdx
index 4d08a4ac1..f901cbebb 100644
--- a/apps/docs/content/components/River/index.mdx
+++ b/apps/docs/content/components/River/index.mdx
@@ -51,7 +51,8 @@ It is possible to use 2 or more following left or right river to create a simple
src="https://github.com/primer/brand/assets/6951037/169d5c19-67f4-4f15-8e3b-80c877b34af1"
/>
- Don't break the flow in a stack of rivers that would otherwise stay aligned.
+ Don't break the flow in a stack of rivers that would otherwise stay
+ aligned.
@@ -108,7 +109,7 @@ A single river component acts as a section and it should not include any child s
A river breakout component has an image that fills the width of the container while providing more space for content such as text and lists.
-This is useful when you want to create a highlight which can be used to create more emphasis or simply break a monotonous vertical flow of left/right rivers. It can also be helpful on smaller viewports to avoid stacking two images or two chunks of text from adjacent river components.
+This is useful when you want to create a highlight which can be used to create more emphasis or simply break a monotonous vertical flow of left/right rivers. It can also be helpful on smaller viewports to avoid stacking two images or two chunks of text from adjacent river components.
As its name suggest, a river breakout should not be the first in the stack, it should be positioned in-between two standard rivers.
@@ -161,6 +162,25 @@ The headline in the river component must always be present, but the supplemental
+Limit supplemental content to a maximum of 500 characters or two timeline items to avoid overwhelming the user and disrupting the layout's balance.
+
+
+
+
+ Limit supplemental timeline content to two items.
+
+
+
+ Avoid unbalanced river breakout content.
+
+
+
## Anatomy
