example.json

Background images, styles, and minimum heights

    // contentObjects.json
    "_vanilla": {
        "_backgroundImage": {
            "_large": "course/en/images/example.jpg",
            "_medium": "course/en/images/example.jpg",
            "_small": "course/en/images/example.jpg"
        },
        "_backgroundStyles": {
            "_backgroundSize": "contain",
            "_backgroundRepeat": "repeat",
            "_backgroundPosition": "center center"
        },
        "_pageHeader": {
            "_backgroundImage": {
                "_large": "course/en/images/example.jpg",
                "_medium": "course/en/images/example.jpg",
                "_small": "course/en/images/example.jpg"
            },
            "_backgroundStyles": {
                "_backgroundSize": "contain",
                "_backgroundRepeat": "repeat",
                "_backgroundPosition": "center center"
            },
            "_minimumHeights": {
                "_large": 600,
                "_medium": 400,
                "_small": 200
            }
        }
    }

    // articles.json
    "_vanilla": {
        "_backgroundImage": {
            "_large": "course/en/images/example.jpg",
            "_medium": "course/en/images/example.jpg",
            "_small": "course/en/images/example.jpg"
        },
        "_backgroundStyles": {
            "_backgroundSize": "contain",
            "_backgroundRepeat": "repeat",
            "_backgroundPosition": "center center"
        }
    }

    // blocks.json
    "_vanilla": {
        "_backgroundImage": {
            "_large": "course/en/images/example.jpg",
            "_medium": "course/en/images/example.jpg",
            "_small": "course/en/images/example.jpg"
        },
        "_backgroundStyles": {
            "_backgroundSize": "contain",
            "_backgroundRepeat": "repeat",
            "_backgroundPosition": "center center"
        },
        "_minimumHeights": {
            "_large": 600,
            "_medium": 400,
            "_small": 200
        },
        // Divider Block - adds class to `.block` element
        "_isDividerBlock": false
    }

On screen animation classes

    "_onScreen": {
        "_isEnabled": true,
        "_comment": "Supported classes = 'fade-in' | 'fade-in-left' | 'fade-in-right' | 'fade-in-top' | 'fade-in-bottom'. Additional classes can be used but they must be predefined in one of the Less files",
        "_classes": "fade-in-bottom",
        "_percentInviewVertical": 50
    }

Block classes

    "_comment": "Aligns child components centrally on the vertical axis",
    "_classes": "align-vert-center"

    "_comment": "Background color mixin. 'block-color' class is set up to be a common class that can be used for style generic overrides. The second class must match a predefined variable in the theme or added in Project Settings > Custom CSS/Less code.",
    "_classes": "block-color black"