One line lower-third component

This component is inpired on the lower-thirds used by CNN for the breaking news

Demo:

basic/052 component schema

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

{
    "type": "component",
    "component": "basic/052",
    "settings": {
        "card": {},
        "headline": {},
        "section": {}
    }
}

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

Settings property for basic/052

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"
horizontal-align
"left"
padding
"4vw"

headline object

Check all available object properties here.
Object property
Default value
text
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
font-size
"2.5vw"
font-family
"Inter"
font-weight
"400"
background-color
"white"
color
"black"
padding
"1vw"

section object

Check all available object properties here.
Object property
Default value
text
"SECTION"
font-size
"2.5vw"
font-family
"Inter"
font-weight
"400"
background-color
"red"
color
"white"
padding
"1vw"

Usage examples

Check the following examples of basic/052:

Example 1

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 5,
            "elements": [
                {
                    "type": "component",
                    "component": "basic/052",
                    "settings": {
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet"
                        }
                    },
                    "cache": false
                }
            ],
            "background-color": "#4392F1",
            "cache": true
        }
    ]
}

Example 2

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "background-color": "black",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/mars-01.mp4",
                    "scale": {
                        "height": 1080
                    }
                },
                {
                    "type": "component",
                    "component": "basic/052",
                    "settings": {
                        "section": {
                            "text": "SPACE"
                        },
                        "headline": {
                            "text": "25 photos that could change the way you see our universe"
                        }
                    }
                }
            ]
        }
    ]
}