UAMS Side-by-Side Image & Text Block

Does the subject matter of your page has a feature you want to highlight? If so, then the UAMS Side-by-Side Image & Text block is a block that can be used to display that type of content.

Does the subject matter of your page has a feature that has components? Or does it have several features that can be thematically grouped together? If so, then you could use the UAMS Stacked Image & Text block instead.

Each UAMS Side-by-Side Image & Text block must have a heading, a body/description, and an image. You have the option of including a single primary button link. You also have an option that will allow you to list up to six links.

Capitalize the text in the heading according to the AP Style rules for composition titles.

The block can be configured to have the image on the left or the right. The text content will be on the opposite side of the page from the image.

Body and Link List Layout

If you want to display a list of up to six links, select the Body and Link List option in the Choose Text Layout dropdown. This will replace the body/description input with another similar input with a lower character limit. It will also add the ability to define up to six links.

Each link must have link text, a URL and a description.

The link description is necessary for accessibility. It helps to distinguish between multiple links on the page that use the same link text. For example, if multiple links on the page have the same link text, but go to different destinations, screen readers will not be able to determine a difference. Your link description should adequately describe the action that is being taken by the user when they click that link. It should also be unique on the page, meaning no other link’s description should be the same value. Do not copy the link text into this field. Do not copy any related item headings into this field.

You have the ability to automatically add “and more”, but it will limit you to five links. The “and more” text will be added where the next link would ordinarily have gone.

Button Link

The button link must have link text, a URL and a description.

Your link text should be two to four words. It should be an action phrase. You are telling the user to do a thing. Do not use “Click Here”.

The link description is necessary for accessibility. It helps to distinguish between multiple links on the page that use the same link text. For example, if multiple links on the page have the same link text, but go to different destinations, screen readers will not be able to determine a difference. Your link description should adequately describe the action that is being taken by the user when they click that link. It should also be unique on the page, meaning no other link’s description should be the same value. Do not copy the link text into this field. Do not copy any related item headings into this field.

The Image

It is strongly recommended that a photo be used and not an illustration. If it must be an illustration, it should not have a white or light gray background. There should be no text in your image, as this is an accessibility issue.

If a photo is used, the preferred option would be to use one containing people. This can be a UAMS photo or a stock photo relevant to the purpose and context of the particular block.

If a logo must be used, steps must be taken to ensure that there is significant visual contrast between the elements of the logo and the elements of the background of the image (e.g., blurring the background, darkening the background, lightening the background). The logo must be sized and arranged within the image so that it is fully visible and that there is adequate clearance around the logo at all browser viewport widths. The logo must not be placed over a color field, but should be composited over some other visual element, preferably a photo relevant to the purpose and context of the particular block. Download the UAMS Side-by-Side Image & Text Block With Logo Photoshop Template from Box.com for assistance creating your image.

The image you choose will be automatically cropped to a 16:9 aspect ratio. You can configure the block so that it takes the top, middle or bottom portion of the image when cropping it, but it is recommended that you crop the image to that aspect ratio before you upload it to achieve the best results.

When choosing your image (and possibly cropping it), ensure that the main content of your image is within the middle 50% of the image, horizontally. In smaller browser widths, the entire image will be displayed, but only that middle portion will be visible in larger browser widths. You can configure the block so that it shows the left-most or right-most portion of your image, but the 50% rule still applies, it just will no longer be the middle 50%. Download the UAMS Side-by-Side Image & Text Block Photoshop Template from Box.com for assistance creating your image.

Do not construct a landscape image by compositing multiple images. Do not construct a wider image by placing a narrower image on a wider canvas. Either upload the original image or crop the image before uploading it to the media library.

Background Color

The background color of the block can be set to white or gray. Read more about Backgrounds of UAMS Blocks.

Examples

See examples of the UAMS Side-by-Side Image & Text block below.