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:

{
    "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
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#4392F1';
$scene1->addElement([
'component',
'basic/000',
	[
		[
'Lorem ipsum dolor sit amet',
'white'
		],
		[
			[
'Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, 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.'
			],
'white'
		]
	],
1600,
760,
160,
160,
10
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#4392F1");
scene1.addElement([
"component",
"basic/000",
	[
		[
"Lorem ipsum dolor sit amet",
"white"
		],
		[
			[
"Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, 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."
			],
"white"
		]
	],
1600,
760,
160,
160,
10
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

Example 2

JSON
PHP
NodeJS

{
    "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"
                        }
                    }
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/typing-01.mp4'
]);
$scene1->addElement([
'component',
'basic/000',
800,
960,
160,
	[
		[
'white',
'10px'
		],
		[
'Lorem ipsum dolor sit amet',
'black'
		],
		[
			[
'Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, 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.'
			],
'black'
		]
	]
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/typing-01.mp4"
]);
scene1.addElement([
"component",
"basic/000",
800,
960,
160,
	[
		[
"white",
"10px"
		],
		[
"Lorem ipsum dolor sit amet",
"black"
		],
		[
			[
"Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, 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."
			],
"black"
		]
	]
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

Simple card component

← Documentation

Text styles

Component packs