Differences

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

--- expandable_list [2026/07/20 00:00] – thehort
+++ expandable_list [2026/07/20 20:53] (current) – [Display Examples] thehort
@@ Line 1: / Line 1: @@
 ====== Expandable List ======
-The Expandable List block will create list of items that initially displays a compressed amount of information, but can be expanded to display more in depth content. A background image or color can be assigned to each list in the right hand inspector. Each list item can have:
+The **Expandable List** block will create list of items that initially displays a compressed amount of information, but can be expanded to display more in-depth content. A background image or color can be assigned to each list in the right hand inspector. Each individual list item can have:
-  * **Title:** Used both in the collapsed and expanded states
+  * **Title:** Used both in the collapsed and expanded states //(required)//
   * **Collapsed Text:** This is the short paragraph that will display in the collapsed state only
-  * **Image:** Used both in the collapsed and expanded states
+  * **Image:** Used both in the collapsed and expanded states //(required)//
-  * **Intro:** First line(s) of text the displays on its own below the title in the expanded state
+  * **Intro:** First line(s) of text that displays on its own below the title in the expanded state
   * **Body:** The main copy block that displays in the expanded state
   * **Highlight:** Short text block, which always is white text, that displays alongside the body in the expanded state
   * **Highlight Background Image:** The background image for the highlight. This image should be a dark color in order for the white highlight text to be legible
   * **Navigation Cards Title:** The title used for the additional navigational items that display at the bottom of the expanded state
-  * **Navigation Cards:** Multiple images may be selected to used as navigational items at the bottom of the expanded state. The title and link for each navigational card is set on the image itself, in the ''Title'' and ''Link URL'' fields respectively
+  * **Navigation Cards:** Multiple images may be selected to be used as navigational items at the bottom of the expanded state. The title and link for each navigational card is set on the image itself, in the ''Title'' and ''Link URL'' fields respectively
+==== Display Examples ====
+Expandable list with all items collapsed on a large screen size:
+{{:screenshots:expandable-list-collapsed-desktop.jpg?800|}}
+Expandable list with the first item expanded on a large screen size:
+{{:screenshots:expandable-list-expanded-desktop.jpg?800|}}
+^ Expandable list with all items collapsed on a small screen size  ^ Expandable list with the first item expanded on a small screen size  ^
+| {{:screenshots:expandable-list-collapsed-mobile.jpg?250|}} | {{:screenshots:expandable-list-expanded-mobile.jpg?250|}} |