Backgrounds of UAMS Blocks
Colors
White and Gray Banding
We strongly recommend alternating the color of adjacent UAMS Blocks between white and gray to give adequate visual separation without overwhelming the user with several colors at once.
The Side-by-Side Image & Text block can be an exception to this, if they are not adjacent to anything other than another Side-by-Side Image & Text block. Or if they are adjacent to a block whose background is using a vivid color (red, blue, green, etc.).
Vivid Colors
If there is a block of particular importance, that is where you would use the vivid color options (red, blue, green, etc.).
When choosing a vivid color option, we recommend selecting colors in a particular order. This also applies to the color of the first slide of your hero, if a hero is used on your page. The order is:
- Red – 9D2235
- Blue – 23739D
- Green – 1B7D3D
- Eggplant – 701E45
- Teal – 427F81
- Orange – CA4C1D
The red background in a Graphic header option counts for the red option in this order. If you have a Graphic header option set on your page, skip red and move on to blue.
If you have the Marketing Landing Page header option set on your page, skip blue and move on to green.
Background Images
The background image setting should also be used sparingly. We strongly recommend against using them in adjacent blocks unless the blocks were designed with that purpose in mind (e.g., the UAMS Text & Image Overlay Block).
The background image is simply there to add texture. It should not contain any content that is important to the user.
The image used must be a photo, preferably one containing people. This can be a UAMS photo or a stock image relevant to the purpose and context of the particular block. Logos must not be used.
The image used should be a landscape (horizontal) image. It will automatically be cropped to a specific landscape aspect ratio, so starting with a landscape image will yield the best results.
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.
Select an image that is not comprised of high-contrast areas. After previewing or publishing your page, evaluate the block to ensure that the background is not so busy as to make it difficult to read the text.
The white or gray background options must not be used in combination with a background image, as the text readability often suffers when those settings are combined.
Considerations for the First Block
The first block on a page with a Graphic, Hero or Marketing Landing Page header option set should not use a background image, as the Graphic and Hero headers have a background image and that would create an overly-busy appearance.
Considerations for the Final Block
The final block on the page should not use a red background, as the page’s footer is already red and would not result in much visual separation. The same goes for eggplant, as it is too similar to the red in the footer.
The final block on the page should not use a background image, as the page’s footer has a background image and that would create an overly-busy appearance.
See examples of background colors and images below.
Red Background Color
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. Red – 9D2235
Blue Background Color
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. Blue – 23739D
Green Background Color
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. Green – 1B7D3D
Eggplant Background Color
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. Eggplant – 701E45
Teal Background Color
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. Teal – 427F81
Orange Background Color
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. Orange – CA4C1D
White Background Color
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.
Gray Background Color
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.
Black Background Color
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.
Red Background Color With Low Contrast Image
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.
Blue Background Color With High Contrast Image
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.