Application Guide
Overview
When to use
The application guide is used to display a process of some steps to accomplish a target goal. For example, how clean a car right. Every step requires an image and a description. The description can include rich text elements like headline, paragraphs, lists and links. All steps are numbered by default.
When to consider an alternative
If you want to display random contents with no necessary order or to display emotional image-text combinations.
Image Sizes
| brp-0 | brp-1 | brp-2 | brp-3 | brp-4 | |
|---|---|---|---|---|---|
| aspect ratio | 16:9 | 16:9 | 16:9 | 16:9 | - |
| size (width / height) | 450px / 253px | 708px / 398px | 931px / 523px | 800px / 450px | - |
Component
Default
List rhythm
Displays all steps in a list with a left and right alternation of the image
List grid
Displays all steps in a two column grid
Properties
ApplicationGuide
| Property | Type | Required | Default |
|---|---|---|---|
| listRhythm | Bool | false | - |
| listGrid | Bool | false | - |
| utilClassNames | String | false | - |
| children | Node | false | - |
ApplicationGuide.Description
| Property | Type | Required | Default |
|---|---|---|---|
| children | Node | false | - |
| title | String | true | - |
| image | Node | false | - |
| utilClassNames | Node | false | - |