Media Object List Component: Difference between revisions
Imported from Confluence |
|||
| Line 15: | Line 15: | ||
== Examples == | == Examples == | ||
{{StorybookComponent|id=components-media-object--media-object|height=650}} | |||
== Step-by-step Instructions == | == Step-by-step Instructions == | ||
Revision as of 13:38, 14 May 2026
The Media Object List component allows you to display one or many left or right-aligned images alongside a title, label, text, and link.
Elements
- Title (required, user can toggle visibility)
- Media Object Item - Title
- Media Object Item - Label
- Media Object Item - Body
- Media Object Item - Image
- Media Object Item - Call to Action
- Media Object Item - Layout
Examples
Step-by-step Instructions
- Add a Title for the entire component. The Media Object List will display this title above the first object in the list, if the user has selected to display the title.
- Begin to add your Media Object List items:
- Add a Title for the Media Object List item.
- Add short Label to give further context to the Media Object List item.
- Add Body text that will make up the primary text for the object.
- Add the Image. If after previewing your pane you notice that your image looks grainy or pixelated, try uploading a higher quality version.
- If using an existing image already in the system:
- Click Insert an Image button to launch the browser pop-up window.
- Navigate to the image under Select Image, clicking on the radio button to the left of the thumbnail to select it.
- Press the Select Image button in the bottom left.
- If using a new image:
- If you’re adding a new image to the system, click the Insert an Image button to launch the browser pop-up window button.
- Click Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.
- If using an existing image already in the system:
- If you've added an image, select whether the image should be left or right-aligned under Media Object Layout.
- Optionally, add a Call to Action Link. This will inherit the standard Call to Action formatting.
- Click Add another item to add additional objects.
