Differences

This shows you the differences between two versions of the page.

--- image_with_insets [2023/02/05 14:35] – thehort
+++ image_with_insets [2023/02/26 16:55] (current) – [Display Examples] thehort
@@ Line 2: / Line 2: @@
 The Image with Inset block allows you to add images, which can have color overlays, that have content areas positioned on top of the images. The ''Inset Content'' field allows for multiple block elements to be added to provide maximum flexibility for want can be displayed within the inset.
-When added within a column, the Image with Inset block layout automatically adjusts to be optimized for column placement. The block is design to support placement outside of a column or in two or three column layouts.
+When added within a column, the layout automatically adjusts to be optimized for column placement. The block is design to support placement outside of a column or in two or three column layouts.
-The inset content will not display in the live preview in the content area and in order to preview the content, you must use the Preview link in the top right corner of the screen and preview in a new tab.
+The inset content will not display in the live preview in the content area. In order to preview the content, you must use the Preview link in the top right corner of the screen and preview in a new tab.
+==== Display Examples ====
+At large screen sizes with default height and not within a column:
+{{:screenshots:inset-default-desktop.png?800|}}
+At medium screen sizes with default height and not within a column:
+{{:screenshots:inset-default-tablet.png?450|}}
+At small screen sizes with default height and not within a column:
+{{:screenshots:inset-default-mobile.png?250|}}
+At large screen sizes with compact height and not within a column:
+{{:screenshots:inset-compact-desktop.png?800|}}
+At large screen sizes with default height and in two columns:
+{{:screenshots:inset-two-column.png?800|}}
+At large screen sizes with default height and in three columns:
+{{:screenshots:inset-three-column.png?800|}}