UAMS Side-by-Side Image and Text Block
Does the subject matter of your page have a feature you want to highlight, or a quote that speaks to it? If so, the UAMS Side-by-Side Image and Text block can display that content beside a supporting image.
Does the subject matter of your page have a feature with several components, or several features that can be grouped together by theme? If so, consider the UAMS Stacked Image and Text block instead.
Each UAMS Side-by-Side Image and Text block must have a heading and an image. What appears below the heading depends on the text layout you choose: a body/description, a body with a list of links, or a quote with a citation. Most layouts can also include a single primary button link.
Capitalize the text in the heading according to the AP Style rules for composition titles.
The block can be configured to place the image on the left or the right. The text content will be on the opposite side of the page from the image.
Text Layouts
Choose a layout in the Choose Text Layout dropdown. The fields below the dropdown change to match the layout you choose.
- Body only (the default): a heading, a body/description, and an optional button.
- Body and Link List: a heading, a shorter body/description, a list of up to six links, and an optional button.
- Blockquote with Citation: a heading, a quote, and the name and title of the person quoted. This layout has no button.
- Blockquote with Citation and Link: the same as Blockquote with Citation, with a shorter quote and an optional button.
In every layout, the heading has a 50-character limit.
Body Only Layout
The Body only layout displays the heading followed by a body/description of up to 449 characters.
Button
The button is optional, and it is separate from the links in the list of the Body and Link List layout. If a link is included, a button is displayed. If no link is included, no button is displayed.
To include a link, enter the button text. Once the button text is entered, the Button URL and Link Description fields appear, and both are required. To leave the button out, leave the button text empty.
The Blockquote with Citation layout has no button. The links in the list are not buttons, and they are not affected by the button text.
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. The body/description input is replaced with a similar input limited to 172 characters, and you can define between one and six links.
Each link must have link text (up to 40 characters), 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.
If you have five or fewer links, you can automatically add “and more” to the end of the list. The “and more” text is added where the next link would ordinarily have gone. The option disappears once you add a sixth link.
Blockquote Layouts
Use one of the blockquote layouts to feature a quote, such as a testimonial from a patient or a statement from a provider. Select Blockquote with Citation or Blockquote with Citation and Link in the Choose Text Layout dropdown. The body/description input is replaced with fields for the quote and the person being quoted.
- Quote (required): the words being quoted. The limit is 306 characters for Blockquote with Citation and 217 characters for Blockquote with Citation and Link.
- Speaker Name (required): who said it, for example “Michael Miller, DC, MS”. 58-character limit.
- Speaker Title (optional): for example “Chiropractor, UAMS Health Orthopaedics and Sports Medicine Clinic”. This field appears once a speaker name has been entered. 121-character limit.
Do not type quotation marks around the quote. They are added automatically, and any quotation marks typed at the beginning or end of the quote are removed. The speaker’s name and title are displayed below the quote as its citation.
Always use these fields for a quote instead of typing the quote and citation into a body field, and never add HTML to a body field to imitate a quote. If an existing block was built that way, switch it to a blockquote layout and move the quote, name and title into their own fields.
The Blockquote with Citation layout never displays a button, even if one was entered while the block used another layout. If you need a button with your quote, use Blockquote with Citation and Link.
Button Link
A single primary button link is available in every layout except Blockquote with Citation. The button is optional: leave the button text empty and no button will be displayed. Once you enter button text, the button must also have a URL and a description.
Your link text should be two to four words. It must 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 and Text Block With Logo Photoshop Template from Box.com for assistance creating your image.
Image Size and Cropping
The recommended image size is 5120×2880 pixels, and the minimum is 1920×1080 pixels.
The image you choose will be automatically cropped to a 16:9 aspect ratio. Use the Vertical Crop setting (Top, Center or Bottom) to choose which portion of the image is kept when it is cropped. For the best results, crop the image to a 16:9 aspect ratio before you upload it.
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. Use the Image Anchor Position setting (Left, Center or Right) to show the left-most or right-most portion of your image instead. The 50% rule still applies; it just will no longer be the middle 50%. Download the UAMS Side-by-Side Image and 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.
Image Alt Text
By default, the block uses the alt text defined for the image in the media library. If you want different alt text in this block, enter it in the Image Alt Text Override field (125-character limit).
Image and Text Position
Use the Image and Text Position setting to choose Image on Left, Text on Right (the default) or Image on Right, Text on Left. On smaller screens, the image is displayed above the text regardless of this setting.
Background Color
The background color of the block’s text container can be set to Auto (the default), White or Gray. Auto alternates between white and gray based on the blocks around it, so consecutive blocks are visually separated. Read more about Backgrounds of UAMS Blocks.
Region Filter
On sites where geotargeting is available, the block has a Region Filter section. Choose Include or Exclude, then select one or more regions (Central, Northeast, Northwest, Southeast and Southwest). With Include, the block is shown only to visitors in the selected regions; with Exclude, it is hidden from them. If no region is selected, the block is shown to everyone.
In the editor, a block with a region filter is always displayed, with a note above it naming the regions it is limited to. If you do not see the Region Filter section, geotargeting is not available on your site.
Linking to the Block
To link directly to the block from elsewhere on the page or from another page, give it an HTML anchor in the block’s Advanced settings panel. For example, an anchor of patient-stories can be linked to with #patient-stories.
Examples
See examples of the UAMS Side-by-Side Image and Text block below.
Sed ut perspiciatis unde omnis iste natus error si
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
Learn MoreDonec pede justo, fringilla vel, aliquet nec
“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.”
Unde Omnis Iste Natus Error
In enim justo, rhoncus ut, imperdiet a, venenatis
“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.”
Unde Omnis Iste Natus Error