The patterns below show how different combinations of resizeDirection and contentResizeDirection work for common component types. For all available properties, see Layout.
The Wix user sets the width in the editor, and the height grows automatically as content wraps.
This pattern also works for progress bars, inline labels, and single-line inputs.
The Wix user can resize freely in the editor. The image scales to fill the component without pushing its boundaries out, and contentFill enables the editor's cropping tools.
This pattern also works for videos, background media, and maps.
Resizing preserves the aspect ratio. The image fills the component but doesn't auto-resize.
This pattern also works for icons, avatars, and thumbnails.
The Wix user can resize the component in both directions, while the height adjusts automatically to fit the content, such as the label, icon, or spacing.
This pattern also works for tags, chips, and call-to-action banners.
The Wix user controls the height in the editor. Children fill the component's visible area. To make the component span its parent's width on install, set installation.initialSize.width.sizingType to 'stretched'. For details, see installation.
This pattern also works for sections, panels, card groups, and sidebars.
The Wix user can't resize the component. Its content or fixed dimensions entirely determine the component's size.
This pattern also works for badges, status indicators, and separators.