Component basic/050

Component ID: basic/050

A news-style lower-third overlay inspired by CNN breaking news graphics. Features a vertical colored bar on the left, a bold headline with a background strip, and a secondary lead/subtitle text below with its own background. Both text areas animate in with a wipe-right reveal effect. Ideal for news-style videos, informational overlays, speaker identification, or any scenario requiring a professional lower-third graphic.

Section	Lower-third overlays typically positioned at the bottom of the video, for titles, names, or news-style banners
Animation	1) Red bar grows vertically (200ms). 2) Headline and lead containers wipe open left-to-right (800ms each, staggered). 3) Text slides up with fade-in (300ms).
Intro duration	10 s

Preview

Element schema

Minimal shape of a basic/050 component element:

{
    "type": "component",
    "component": "basic/050",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`card`

Overall container positioning and layout.

Property	Type	Default	Description
`vertical-align`	string (enum)	`bottom`	Vertical position. Values: `top`, `center`, `bottom`
`text-align`	string (enum)	`left`	Content alignment. Values: `left`, `center`, `right`
`padding-bottom`	string	`7vh`	Bottom padding from edge.
`padding-left`	string	`4vw`	Left padding.
`padding-right`	string	`4vw`	Right padding.
`overflow`	string	`hidden`	Keep 'hidden' for wipe animation.

`headline`

Main headline strip (white background, black text by default).

Property	Type	Default	Description
`text`	string	—	Headline text (typically 1 line).
`font-size`	string	`auto`	'auto' to fit width, or CSS units.
`font-family`	string	`Inter`	Google Font name.
`font-weight`	string	`700`	Font weight.
`color`	string	`black`	Text color.
`background`	string	`white`	Strip background.
`text-shadow`	string	`1px 1px 2px #777`	Text shadow.
`text-transform`	string (enum)	—	Text transform. Values: `none`, `uppercase`, `lowercase`, `capitalize`
`padding`	string	`0.4vw`	Inner padding.
`padding-left`	string	`1.5vw`	Left padding.

`lead`

Secondary text strip (black background, white text by default).

Property	Type	Default	Description
`text`	string	—	Lead/subtitle text.
`font-size`	string	`auto`	'auto' to fit (capped at 80% of headline), or CSS units.
`font-family`	string	`Inter`	Google Font name.
`font-weight`	string	`700`	Font weight.
`color`	string	`white`	Text color.
`background`	string	`black`	Strip background.
`padding`	string	`0.4vw`	Inner padding.
`padding-left`	string	`1.5vw`	Left padding.

`bar`

Vertical accent bar on the left.

Property	Type	Default	Description
`background`	string	`red`	Bar color.
`width`	string	`2vw`	Bar width.
`margin`	string	`0`	Bar margin.