Picture with text component

Demo:

basic/200 component schema

This is a simplified schema of a basic/200 component element:

{
    "type": "component",
    "component": "basic/200",
    "settings": {
        "headline": {},
        "body": {},
        "image": {},
        "lower-third": {},
        "logo": {}
    }
}

Check the full specification of the Component schema in the API documentation.

Settings property for basic/200

This component accepts the following object items in the settings property:

headline object

Check all available object properties here.
Object property
Default value
text
"Lorem ipsum dolor sit amet"
font-size
"3vh"
font-family
"Inter"
font-weight
"700"

body object

Check all available object properties here.
Object property
Default value
text
"Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
font-size
"2vh"
font-family
"Inter"
font-weight
"700"

image object

Check all available object properties here.
Object property
Default value
src
"https://assets.json2video.com/assets/images/london-01.jpg"
center

Warning: htmlentities() expects parameter 1 to be string, array given in /var/www/json2video.com/html/docs/resources/detail.php on line 138

lower-third object

Check all available object properties here.
Object property
Default value
background
"#0000FF"

logo object

Check all available object properties here.
Object property
Default value
src
"https://json2video.com/images/json2video-logo.png"

Usage examples

Check the following examples of basic/200:

Example 1

{
    "width": 360,
    "height": 640,
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "elements": [
                {
                    "type": "component",
                    "component": "basic/200",
                    "settings": {
                        "headline": {
                            "text": "Welcome to London!"
                        },
                        "body": {
                            "text": "Discover the best of London with Visit London, the official guide to England\u2019s exciting capital. If you\u2019re not able to visit just yet, plan ahead to make the most of your next visit."
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}