Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add interface guidelines for river breakout content length #537

Merged
merged 2 commits into from
Feb 22, 2024
Merged

Add interface guidelines for river breakout content length #537

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
841690b
Add interface guidelines for river breakout content length
danielguillan Feb 19, 2024
add8643
Update screenshot
danielguillan Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions apps/docs/content/components/River/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
<Caption>
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.
</Caption>
</Dont>
</DoDontContainer>
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -161,6 +162,25 @@ The headline in the river component must always be present, but the supplemental
</Dont>
</DoDontContainer>

Limit supplemental content to a maximum of 500 characters or two timeline items to avoid overwhelming the user and disrupting the layout's balance.

<DoDontContainer>
<Do>
<img
alt=""
src="https://github.com/primer/brand/assets/175638/c5879e94-09c3-4494-aa42-87543570dfb4"
/>
<Caption>Limit supplemental timeline content to two items.</Caption>
</Do>
<Dont>
<img
alt=""
src="https://github.com/primer/design/assets/175638/8a083960-e12a-4f11-b282-45d663be2e28"
/>
<Caption>Avoid unbalanced river breakout content.</Caption>
</Dont>
</DoDontContainer>

## 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)
Expand Down
Loading