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-0brp-1brp-2brp-3brp-4
    aspect ratio16:916:916:916:9-
    size (width / height)450px / 253px708px / 398px931px / 523px800px / 450px-

    Component

    Default

    1024px
    375px768px1400px

    List rhythm

    Displays all steps in a list with a left and right alternation of the image

    1024px
    375px768px1400px

    List grid

    Displays all steps in a two column grid

    1024px
    375px768px1400px

    Properties

    ApplicationGuide

    PropertyTypeRequiredDefault
    listRhythmNodefalse-
    listGridNodefalse-
    utilClassNamesNodefalse-
    childrenUnion
    Class(ApplicationGuide.Description) │ Array<Class(ApplicationGuide.Description)>
    false-

    ApplicationGuide.Description

    PropertyTypeRequiredDefault
    childrenNodefalse-
    titleStringtrue-
    brp0Nodefalse-
    brp0RetinaNodefalse-
    brp1Nodefalse-
    brp1RetinaNodefalse-
    brp2Nodefalse-
    brp2RetinaNodefalse-
    brp3Nodefalse-
    brp3RetinaNodefalse-
    brp4Nodefalse-
    brp4RetinaNodefalse-
    brp5Nodefalse-
    brp5RetinaNodefalse-
    imageSrcNodetrue-
    imageTitleNodetrue-
    utilClassNamesNodefalse-