C17 Side media asset

The side media asset component allows users to add a single image or video asset, with an optional caption, enhancing the page layout and visual presentation of content.

 

Component requirements

Required:

  • Headline type: H2/H3/H4/P. Default: P.
  • Image side: Left/Right. Default: right.
  • Image border on: Checkbox. Defines is 1px border shows around the image. Default: unchecked.
  • Image container size: Defines size of image. 20/30/40/50. Default: 50.
  • Support copy: Rich text field. Copy which appears to the left or right of the media asset.

Optional:

  • Headline: Text Field.

  • Images or Video ID: Specifies the media asset that will be positioned alongside of content.

  • Image caption: Rich text field. Specifies caption that will be included below the media asset.

  • Image CTA link: Text field along with associated link type (internal/external/anchor/email/phone).

Content guidance

Use this component if you want text to wrap around an image or video. See an example on the demyelinating disease page or the epididymitis page. 

Headline (optional)

  • This headline should anchor the section as a whole and speak to both the image and the surrounding copy. 
  • Use H2, H3 or H4.

Rich text support copy (required)

  • This is the copy that will surround the image. 
  • Keep in mind this text will surround the whole image so at least two paragraphs are ideal. 

Caption (optional)

  • You have the option to include a caption below the image. This copy should be one to two sentences. 
  • Ensure this copy makes sense with surrounding text while trying to avoid redundancies. 

CTA button (optional)

  • For the CTA button copy, use sentence case.   
  • CTAs should be descriptive and clearly state what action users should take. Avoid using general phrases such as “click here” or “read more.”   
  • CTAs should be kept to 30 characters or fewer. 

Image alt text 

  • If using an image, include alt text.
  • This descriptive text will explain each photo if the images don't appear or if a person with visual impairment is using a screen reader on the page. 
  • For example, if the photo is of a person getting their flu shot, the image alt text might be: “Person getting their flu shot at Advocate Medical Center.” 

ADA requirements

  • Ensure that if image is used as an asset, it has a descriptive alt text for screen readers.

  

Component examples

Example #1: Side media asset in which the asset is positioned to the right, at 20% layout, with caption enabled, asset linked, as well as headline enabled and set to h3.

C17 Side media asset headline example 1 (set as H3 / optional)

side_media_asset_template
C17 Side media asset (example 1) image caption (optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

 

Example #2: Side media asset (in this example image) in which the asset is positioned to the left, at 40% layout, with caption disabled, asset not linked, as well as headline disabled.

side_media_asset_template

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

 

Example #3: Side media asset (in this example video) in which the asset is positioned to the right, at 30% layout, with caption disabled, as well as headline enabled set to h4.

C17 Side media asset headline example 3 (set as H4 / optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

 

Example #4: Side media asset (in this example video) in which the asset is positioned to the left, at 50% layout, with caption enabled, as well as headline disabled.

C17 Side media asset (example 4) asset caption (optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.