Avatar lower-third component

Demo:

basic/051 component schema

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

{
    "type": "component",
    "component": "basic/051",
    "settings": {
        "card": {},
        "headline": {},
        "image": {},
        "bar": {}
    }
}

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

Settings property for basic/051

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

card object

Check all available object properties here.
Object property
Default value
vertical-align
"bottom"
text-align
"left"
padding-bottom
"7vh"
padding-left
"4vw"
padding-right
"4vw"
overflow
"hidden"

headline object

Check all available object properties here.
Object property
Default value
text
"Lorem ipsum dolor sit amet"
color
"black"
background
"white"
font-size
"auto"
A value of auto lets the component resize the text to fit the available space
font-family
"Inter"
font-weight
"400"
text-shadow
"1px 1px 2px #777"

image object

Check all available object properties here.
Object property
Default value
src
"https://thispersondoesnotexist.com/image"
size
"10vw"

bar object

Check all available object properties here.
Object property
Default value
color
"red"

Usage examples

Check the following examples of basic/051:

Example 1

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 5,
            "elements": [
                {
                    "type": "component",
                    "component": "basic/051",
                    "settings": {
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet"
                        },
                        "image": {
                            "src": "https://assets.json2video.com/assets/images/broderick-avatar-01.jpg"
                        }
                    },
                    "cache": false
                }
            ],
            "background-color": "#4392F1",
            "cache": true
        }
    ]
}

Example 2

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/programming-01.mp4"
                },
                {
                    "type": "component",
                    "component": "basic/051",
                    "settings": {
                        "card": {
                            "vertical-align": "bottom"
                        },
                        "headline": {
                            "text": "Shall we play a game?",
                            "font-size": "auto",
                            "font-family": "Share Tech Mono",
                            "font-weight": "400",
                            "color": "#32fc70",
                            "background": "#1a4527"
                        },
                        "image": {
                            "src": "https://assets.json2video.com/assets/images/broderick-avatar-01.jpg"
                        }
                    },
                    "start": 3
                }
            ]
        }
    ]
}