CNN-style lower-third component

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

Demo:

basic/050 component schema

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

{
    "type": "component",
    "component": "basic/050",
    "settings": {
        "headline": {},
        "lead": {},
        "card": {},
        "bar": {}
    }
}

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

Settings property for basic/050

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"
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"
padding
"0.4vw"
padding-left
"1.5vw"

lead 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."
color
"white"
background
"black"
font-size
"auto"
A value of auto lets the component resize the text to fit the available space
font-family
"Inter"
font-weight
"400"
padding
"0.4vw"
padding-left
"1.5vw"

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"

bar object

Check all available object properties here.
Object property
Default value
background
"red"
width
"2vw"
margin
"0"

Usage examples

Check the following examples of basic/050:

Example 1

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 5,
            "elements": [
                {
                    "type": "component",
                    "component": "basic/050",
                    "settings": {
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet"
                        }
                    }
                }
            ],
            "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/new-york-01.mp4"
                },
                {
                    "type": "component",
                    "component": "basic/050",
                    "settings": {
                        "card": {
                            "vertical-align": "bottom"
                        },
                        "headline": {
                            "text": "Broadway will allow theatergoers to go mask optional in July",
                            "font-size": "auto"
                        },
                        "lead": {
                            "text": "Proof of vaccination is no longer required for patrons of the city's indoor dining, fitness and entertainment venues.",
                            "font-size": "auto"
                        }
                    },
                    "start": 3
                }
            ]
        }
    ]
}