Simple card component

Use this simple component to add a text card in your video, including a headline and body paragraphs. It's really flexible and easily customizable with CSS.

Demo:

basic/000 component schema

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

{
    "type": "component",
    "component": "basic/000",
    "settings": {
        "card": {},
        "headline": {},
        "body": {}
    }
}

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

Settings property for basic/000

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

card object

Defines the properties of the card

Check all available object properties here.
Object property
Default value
vertical-align
"top"
horizontal-align
"center"
margin
"1vw"
padding
"20px"
text-align
"left"
overflow
"hidden"

headline object

Defines the properties of the first text line/paragraph

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

body object

Defines the properties of the following text lines/paragraphs. The text property can be an array of strings

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."
font-size
"3.5vw"
font-family
"Inter"
font-weight
"400"

Usage examples

Check the following examples of basic/000:

Example 1

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "component",
                    "component": "basic/000",
                    "settings": {
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet",
                            "color": "white"
                        },
                        "body": {
                            "text": [
                                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                                "Phasellus elit sem, dignissim convallis ligula vitae, venenatis fermentum risus. Suspendisse viverra ut ipsum eget ullamcorper."
                            ],
                            "color": "white"
                        }
                    },
                    "width": 1600,
                    "height": 760,
                    "x": 160,
                    "y": 160,
                    "duration": 10
                }
            ]
        }
    ]
}

Example 2

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/typing-01.mp4"
                },
                {
                    "type": "component",
                    "component": "basic/000",
                    "width": 800,
                    "x": 960,
                    "y": 160,
                    "settings": {
                        "card": {
                            "background": "white",
                            "border-radius": "10px"
                        },
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet",
                            "color": "black"
                        },
                        "body": {
                            "text": [
                                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                                "Phasellus elit sem, dignissim convallis ligula vitae, venenatis fermentum risus. Suspendisse viverra ut ipsum eget ullamcorper."
                            ],
                            "color": "black"
                        }
                    }
                }
            ]
        }
    ]
}