UAMS Stacked Image & Text Block
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 the UAMS Stacked Image & Text block is a block that can be used to display that type of content.
If features of your page do not have components or cannot be thematically grouped together, you could use the UAMS Side-by-Side Image & Text block instead.
Block Heading
Every UAMS Stacked Image & Text block must have a heading. This heading tells the user what the following items have in common.
Capitalize the text in the heading according to the AP Style rules for composition titles.
While you have the option to hide that heading, it is rarely (if ever) recommended. Leaving it visible gives the user/reader a jumping-in point on your page. If you think you have a good reason to hide the heading, reach out to the web team before doing so.
Items
You then define the content for two or more cards. Four is the ideal number. Any more can overwhelm the user with information and will often exceed the vertical height of their browser’s viewport. Our goal is to package each component of the page so that it can be displayed without scrolling on a desktop computer or laptop.
Each card must have an image, a heading and a body/description.
Heading
Capitalize the text in the heading according to the AP Style rules for composition titles.
Images
Your image should be cropped to a 16:9 aspect ratio before uploading it to the media library. If it is not, it will be automatically cropped to meet that aspect ratio, which may result in an undesirable presentation.
It is strongly recommended that your image be a photo rather than an illustration. If you need access to stock images, reach out to the web team. It is also strongly recommended that the background of your image not be pure white. Do not include images with text in them, as this is a violation of accessibility guidelines.
Description
Your body/description should be a concise description of the topic addressed by the card. You should think of this as a complete sentence or paragraph and write your content as such.
Link
There is an optional link that is displayed on the page as a button at the bottom of the card.
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.
Examples
See an example of this block below.
Stacked Image & Text Example
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.
Aenean Commodo
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 architect
Learn More
In enim justo
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 ri
Sign Up
Ut enim ad minima veniam
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam.
View the photos
At vero eos et accusamus
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
Register for the Event