Component basic/120

Component ID: basic/120

A profile card with a circular image, name, title, and description. The image pops in with an elastic scale effect, name and title slide up with staggered timing, and the description fades in. Perfect for team introductions, testimonial cards, speaker bios, or social media profile displays.

Section	Text card components with headline, body, and optional decorative elements
Animation	1) Image fades in then scales with elastic bounce (1000ms). 2) Name and title slide up with stagger (300ms between, 1000ms each). 3) Description fades in (1000ms).
Intro duration	10 s

Preview

Element schema

Minimal shape of a basic/120 component element:

{
    "type": "component",
    "component": "basic/120",
    "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`

Container positioning.

Property	Type	Default	Description
`vertical-align`	string (enum)	—	Vertical position. Values: `top`, `center`, `bottom`
`horizontal-align`	string (enum)	—	Horizontal position. Values: `left`, `center`, `right`

`image`

Circular profile image.

Property	Type	Default	Description
`src`	string	—	URL to profile image.

`name`

Person's name.

Property	Type	Default	Description
`text`	string	—	Name text.
`color`	string	—	Text color.
`font-size`	string	—	Font size.
`font-family`	string	—	Google Font name.
`font-weight`	string	—	Font weight.

`title`

Job title or role.

Property	Type	Default	Description
`text`	string	—	Title text.
`color`	string	—	Text color.
`font-size`	string	—	Font size.
`font-family`	string	—	Google Font name.

`description`

Additional description text.

Property	Type	Default	Description
`text`	string	—	Description text.
`color`	string	—	Text color.
`font-size`	string	—	Font size.
`font-family`	string	—	Google Font name.