Image paragraph

Image paragraph can be stand-alone content and nested within other paragraphs that requires images.

Image

• Select an image
• Image size

  Source Stretch Custom

Note: only use modal options when creating a thumbnail that would enlarge via a modal. In such case, you would set the image size smaller than the source file's size.

• Display a larger version of the image in a modal.
• Modal Caption
• Modal Width
  Regular Optimal Full Auto

Modal

• Spacing Overrides

  Margin-top

  None xxsmall xsmall small medium large xlarge xxlarge xxxlarge

  Margin-right

  None xxsmall xsmall small medium large xlarge xxlarge xxxlarge

  Margin-bottom

  None xxsmall xsmall small medium large xlarge xxlarge xxxlarge

  Margin-left

  None xxsmall xsmall small medium large xlarge xxlarge xxxlarge

• Additional Attributes

  Note: HTML and aria attributes are allowed.
  Attribute name

  Attribute value

  + Add another attribute

Overrides

Save Changes Cancel

Custom image workflow

Image

• Select an image
• Image size
  Source Stretch Custom

• Note: the pixel value will be set as the max-wdith for the responsive image to display at.

  Legacy sizes

  1. 80px (small)
  2. 150px (medium)
  3. 250px (large)
  4. 550px (xlarge)
  5. 170px (ABM headshot)
  6. 400px

...

Save Changes Cancel

Output markup

Dev Notes

1. Source image size will set the width and height attributes according to the source file's dimentions.
2. Stretch image size will set the fill prop on the image element to true.
3. If custom image size is set, it would override the width attribute, the value for height attribute would need to be updated programatically.