Card with left bar component

Demo:

basic/001 component schema

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

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

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

Settings property for basic/001

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"

font-size

"5vw"

font-family

"Inter"

font-weight

"400"

body 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."

font-size

"3.5vw"

font-family

"Inter"

font-weight

"400"

card object

Check all available object properties here.

Object property

Default value

vertical-align

"top"

text-align

"left"

overflow

"hidden"

bar object

Check all available object properties here.

Object property

Default value

background

"red"

width

"3vw"

margin-right

"3vw"

Usage examples

Check the following examples of basic/001:

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "component",
                    "component": "basic/001",
                    "settings": {
                        "bar": {
                            "background": "#b0feff"
                        },
                        "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/001',
	[
		[
'#b0feff'
		],
		[
'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/001",
	[
		[
"#b0feff"
		],
		[
"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": "image",
                    "src": "https://assets.json2video.com/assets/images/macbook-01.jpg"
                },
                {
                    "type": "component",
                    "component": "basic/001",
                    "width": 920,
                    "x": 960,
                    "y": 160,
                    "settings": {
                        "headline": {
                            "text": "Automate your video marketing",
                            "color": "black",
                            "font-size": "6vw"
                        },
                        "body": {
                            "text": [
                                "Add product videos to your e-commerce",
                                "Convert news feed into social media videos",
                                "Create taylored videos ads",
                                "Automate your video editing at scale",
                                "Generate videos connecting to your CRM or APIs"
                            ],
                            "color": "black",
                            "font-size": "4vw"
                        }
                    }
                }
            ],
            "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->addElement([
'image',
'https://assets.json2video.com/assets/images/macbook-01.jpg'
]);
$scene1->addElement([
'component',
'basic/001',
920,
960,
160,
	[
		[
'Automate your video marketing',
'black',
'6vw'
		],
		[
			[
'Add product videos to your e-commerce',
'Convert news feed into social media videos',
'Create taylored videos ads',
'Automate your video editing at scale',
'Generate videos connecting to your CRM or APIs'
			],
'black',
'4vw'
		]
	]
]);
$scene1->duration = 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.addElement([
"image",
"https://assets.json2video.com/assets/images/macbook-01.jpg"
]);
scene1.addElement([
"component",
"basic/001",
920,
960,
160,
	[
		[
"Automate your video marketing",
"black",
"6vw"
		],
		[
			[
"Add product videos to your e-commerce",
"Convert news feed into social media videos",
"Create taylored videos ads",
"Automate your video editing at scale",
"Generate videos connecting to your CRM or APIs"
			],
"black",
"4vw"
		]
	]
]);
scene1.set("duration", 10);
movie.addScene(scene1);

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

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

Card with left bar component

← Documentation

Text styles

Component packs