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 ![A river component used to showcase a security feature. The title reads "Get security feedback with every git push" and it includes an image showing screenshots of of a CLI prompt with the git push command and a code scanning screenshot.](https://github.com/primer/brand/assets/10632534/bf32364f-02b7-4f0d-8784-471eaf97b4bb)