DrawPRESENTATION OS
Start for free
← Help Center

Info Card

Combine heading, description and image.

How to use

  1. Write the heading and description and choose an optional image.
  2. Set image placement, text colors and card dimensions.

Things to check

Check image cropping and long copy in each card.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

43 / 43

backgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
borderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
borderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
borderWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
cardStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'default' | 'modern' | 'minimal' | 'bordered' | 'shadow'
description

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string
descriptionAlign

Sets the associated element alignment, placement or direction; preview it within the content area.

'left' | 'center' | 'right'
descriptionColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
descriptionFontFamily

Font family. Keep headings and body text consistent with the presentation typography.

string
descriptionFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
hoverEffect

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
imageBorderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
imageObjectFit

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'cover' | 'contain' | 'fill' | 'none'
imagePosition

Sets the associated element alignment, placement or direction; preview it within the content area.

'top' | 'left' | 'right' | 'background'
imageSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
imageUrl

An image, media or link source. Use the media picker or an accessible URL and verify it loads in the presentation.

string
images

An image list; check the order and cropping of every image.

string[]
layout

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'vertical' | 'horizontal' | 'overlay'
opacity

Visibility ratio: 0 is fully transparent and 1 is fully opaque.

number
overlayColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
overlayOpacity

Sets the associated effect intensity or visibility. Stay within the editor allowed range.

number
padding

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
shadowBlur

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
shadowColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
shadowEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
shadowOffsetX

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
shadowOffsetY

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
sliderAutoPlay

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
sliderInterval

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number
sliderShowArrows

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
sliderShowDots

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean
spacing

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
subtitle

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string
subtitleColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
subtitleFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
textAlign

Sets the associated element alignment, placement or direction; preview it within the content area.

'left' | 'center' | 'right'
themeColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
title

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string
titleAlign

Sets the associated element alignment, placement or direction; preview it within the content area.

'left' | 'center' | 'right'
titleColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string
titleFontFamily

Font family. Keep headings and body text consistent with the presentation typography.

string
titleFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number
titleFontWeight

Font weight. Use consistent weights for text at the same level of emphasis.

'normal' | 'bold' | 'light'