Skip to main content
Unlayer Docs

Content Components

Content components live inside <Column> (which lives inside <Row>, which lives inside a root wrapper). They're the actual visible blocks: text, buttons, images, dividers, and so on.

Every content component supports a semantic flat-prop API (e.g., fontSize="14px") and a values escape hatch when you need full control:

// flat (recommended)
<Heading headingType="h1" fontSize="24px" color="#111111">Welcome</Heading>

// values — full control
<Heading values={{ headingType: 'h1', fontSize: '24px', color: '#111111' }}>
  Welcome
</Heading>

Content Reference​

  • Heading — headings from level 1 through 4.
  • Paragraph — rich text through children or HTML.
  • Button — linked calls to action.
  • Image — images with alt text and optional actions.
  • Divider — horizontal separators.
  • Video — YouTube or Vimeo thumbnails.
  • Html — arbitrary HTML.
  • Table — structured tabular content.
  • Social — social icon rows.
  • Menu — horizontal or vertical link lists.

See Also​