From 841690b0495e82fecd8f4528414da436c1aa6ac8 Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Mon, 19 Feb 2024 19:03:21 +0100 Subject: [PATCH 1/2] Add interface guidelines for river breakout content length --- apps/docs/content/components/River/index.mdx | 24 ++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/apps/docs/content/components/River/index.mdx b/apps/docs/content/components/River/index.mdx index 4d08a4ac1..7b9bdb943 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) From add8643a0c721cd4c1f136a4fb85183455df5e5e Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Mon, 19 Feb 2024 19:25:17 +0100 Subject: [PATCH 2/2] Update screenshot --- apps/docs/content/components/River/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/components/River/index.mdx b/apps/docs/content/components/River/index.mdx index 7b9bdb943..f901cbebb 100644 --- a/apps/docs/content/components/River/index.mdx +++ b/apps/docs/content/components/River/index.mdx @@ -168,7 +168,7 @@ Limit supplemental content to a maximum of 500 characters or two timeline items Limit supplemental timeline content to two items.