Profile image component

Demo:

basic/120 component schema

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

{
    "type": "component",
    "component": "basic/120",
    "settings": {
        "card": {},
        "image": {},
        "name": {},
        "title": {},
        "description": {}
    }
}

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

Settings property for basic/120

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

card object

Check all available object properties here.
Object property
Default value
width
"80vw"
vertical-align
"center"
text-align
"center"

image object

Check all available object properties here.
Object property
Default value
width
"100%"
background
"url(https://thispersondoesnotexist.com/image)"
background-size
"cover"
background-repeat
"no-repeat"
margin
"8vw auto"
border-radius
"50%"
border
"4vw solid #000000"

name object

Check all available object properties here.
Object property
Default value
text
"John Doe"
font-size
"10vw"
font-weight
"400"

title object

Check all available object properties here.
Object property
Default value
text
"Title"
font-size
"5vw"

description object

Check all available object properties here.
Object property
Default value
text
font-size
"6vw"
margin
"9vw 0"

Usage examples

Check the following examples of basic/120:

Example 1

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "component",
                    "component": "basic/120",
                    "width": 320,
                    "x": 160,
                    "settings": {
                        "card": {
                            "color": "white"
                        },
                        "image": {
                            "background-image": "url(https://assets.json2video.com/assets/images/man-02.jpg)",
                            "border-color": "#FFF"
                        },
                        "name": {
                            "text": "John Doe"
                        },
                        "title": {
                            "text": "Chief Executive Officer"
                        },
                        "description": {
                            "text": "As is well known, the device of involving real people as notional lessees and ejectors was used to enable freeholders to sue the real ejectors."
                        }
                    },
                    "cache": false
                }
            ],
            "duration": 5
        }
    ]
}