River
Use the river component to introduce a feature using a type and media pairing.
On this page
On this page
Usage
Use rivers to showcase features and introduce topics. Rivers compose images or videos and text together. River's text includes a heading, body text, and an optional link.
River content should be short and concise, no longer than 3 or 4 sentences and in a single paragraph when possible.
Write short and concise text content.
Don't overload the river with too much content.
Stacked
Two or more rivers can be stacked to guide the user through a set of feautres. When stacking rivers, use alternating 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.
Alternate rivers with left and right alignments.
Don't stack numerous rivers with 40:60 ratio without alternating left and right alignments.
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 or 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.
Use pillars or cards to breakout a multiple river section and provide a better visual hierarchy.
Don't stack numerous rivers without breaking the content to avoid repetitive a layout that can make the design feel repetitive.
Sections with rivers
A single river component acts as a section and it should not include any child sections within in. Multiple rivers can be used to conform a section. In that case, the section should include a section intro that introduces the main topic or features.
Use a section intro to introduce multiple rivers.
Don't add child sections or other components to the river body content.
Anatomy
Content
River provides a heading as the main title and a body text as the main content that describes the adjacent visual. The heading should be short and concise and the body should describe the feature or topic in a short paragraph.
Visual
A river can include either an image or video to illustrate the feature or topic. The media should be relevant to the content and should not be used as a decorative element.
Always use high quality images and videos. Avoid using images with text or single logos. Ensure the image fills the provided container.
The image is automatically styled to fit the width of the parent container. If you have bespoke styling requirements, you can disable the provided default styles and style the image manually.
Link
River can include an optional call to action to link to more detailed content about the feature or topic.