You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Improves guidance and examples delivered through the Primer Brand MCP tools:
6
+
7
+
- Improves guidance delivered through the `primer_brand_review` tool.
8
+
- Cleaner output from the `primer_brand_examples` tool.
9
+
- Add new page design guidance advising that `River` descriptions are limited to 160 characters and the default `50:50` image-to-text ratio is preferred.
Copy file name to clipboardExpand all lines: apps/next-docs/content/components/River/index.mdx
+4-15Lines changed: 4 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,7 @@ import dontVisuals from './images/dont-visuals-size.png'
19
19
20
20
Use rivers to showcase features and introduce topics. Rivers are composed of images or videos paired alongside text content like headings, paragraphs, and links.
21
21
22
-
A river’s content should be short and concise, no longer than 3 or 4 sentences and in a single paragraph when possible.
22
+
A river’s content should be short and concise, no longer than 160 characters, and contained in a single paragraph when possible.
23
23
24
24
<DoDontContainer>
25
25
<Do>
@@ -34,20 +34,9 @@ A river’s content should be short and concise, no longer than 3 or 4 sentences
34
34
35
35
### Stacked
36
36
37
-
Two or more rivers can be stacked to guide the user through a set of features. When stacking rivers, alternate between left and right alignments to create a more dynamic reading flow. When alternating alignments, use a `40:60` image to text ratio, otherwise keep the ratio to `50:50`.
37
+
Two or more rivers can be stacked to guide the user through a set of features. Keep rivers in a stack consistently aligned to create a predictable reading flow. For gridline rivers, always use start alignment. Don't use zig-zag layouts.
38
38
39
-
It is possible to use 2 or more following left or right river to create a simple alignment promoting easy scroll scan.
<Caption>Don't break the flow in a stack of rivers that would otherwise stay aligned.</Caption>
49
-
</Dont>
50
-
</DoDontContainer>
39
+
Prefer the default 50:50 image-to-text ratio where possible. Use 60:40 only when the visual needs more space or emphasis.
51
40
52
41
Note that too many rivers can make the design feel repetitive. In that situation, consider introducing a breakout section or break the content with a different component, such as [pillar](/components/Pillar) or [card](/components/Card) to provide a better visual hierarchy and experience. For example, use the river for the top features you want to highlight and then use pillars to showcase the rest.
53
42
@@ -179,7 +168,7 @@ The image is automatically styled to fit the width of the parent container. If y
179
168
180
169
- We recommend using a river left as the first river of the flow to start with a visual and avoid stacking text with above section on mobile
181
170
- River components stacks create a unit, the set should be considered to be the main parent section. The parent section should be spaced as a regular section with the largest spacing while internal elements should use smaller spacing
182
-
-If the image is critical for the user to understand the message, default to right aligned. If the text is critical for the user to understand the image, choose left aligned.
171
+
-For a standalone river, choose its alignment based on whether the visual or text needs emphasis. Keep every river in a stack consistently aligned.
0 commit comments