Heroes are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about. The hero offers a callout which provides a high-level overview of the content on the site and will often reference the hero image that sits behind it.
The size of this configuration only spans up to the ~1200px maximum fixed-width container on a desktop, and stacks at tablet/mobile. This rectangular image aspect ratio is 228:131 at 1140x655px (editoral standard) which is almost close to 16:9.
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph default. Already have an online account? Login
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph default. Already have an online account? Login
The size of this configuration only spans up to the ~1200px maximum fixed-width container on a desktop, and stacks at tablet/mobile. This rectangular image aspect ratio is 228:131 at 1140x655px (editoral standard) which is almost close to 16:9.
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph default. Already have an online account? Login
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph default. Already have an online account? Login
The size of this configuration only spans up to the ~1200px maximum fixed-width container on a desktop, and stacks at tablet/mobile. This particular sample has a background image in the parent container with a 24:7 rectangular aspect ratio, 2400x700px, and a transparent PNG image using the article image component with aspect ratio: 228:131, 1140x655px (editoral standard) which is almost close to 16:9.
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
The size of this configuration only spans up to the ~1200px maximum fixed-width container on a desktop, and stacks at tablet/mobile. This has a background color in the parent container and JPG article image component with a 1:1 square ratio, 1080x1080px.
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
This has a full-screen background color in the parent container and JPG image (article image component). The size of this example image is a 1:1 square ratio, 1080x1080px, but it can be any ratio depending on the context of your image. Alternatively, you can use a background image instead of a color. Or you can remove the JPG placeholder image and only show the parent container's background.
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
This has a full-screen background image in the parent container. This particular image is an old Staying Sharp background with a 64:21 image ratio, at 2560x840px. But feel free to experiment with various rectangular image sizes.
Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This has a full-screen background color and an transparent PNG article image component with a 1:1 square ratio, about 1000x1000px. You can change the background to an image instead of a solid color. Try it out.
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.
This has a full-screen Staying Sharp background image with a 128:53 rectanguar ratio at 1536x636px, and an transparent PNG article image component with a 1:1 square ratio, about 1000x1000px. You can change the background image to a solid color if you want. Try it out.
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.
This separates the page title/intro description from the imagery. It has a full-screen background color and a transparent PNG article image component at 800x460px. You can change the background to an image instead of a solid color too. Experiment with adding large captivating imagery.
Paragraph intro large. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
This has TWO containers, one that shows only on desktop, and another that shows only on Tablet/Mobile. Use Layout mode to see them. Don't forget to copy/paste the hidden Tablet/Mobile container! The desktop's container has a background image at 1900x1092px, and the Tablet/Mobile uses an article image component at 932x535px.
AARP Foundation works for and with over a million older adults, creating solutions that help them move from surviving to thriving.
AARP Foundation works for and with over a million older adults, creating solutions that help them move from surviving to thriving.
This has TWO containers, one that shows only on desktop, and another that shows only on Tablet/Mobile. Use Layout mode to see them. Don't forget to copy/paste the hidden Tablet/Mobile container! The desktop's container has a background image at 5158x2963px, and the Tablet/Mobile uses an article image component at 932x535px.
AARP Foundation works for and with over a million older adults with low income, creating solutions that help them move from surviving to thriving.
AARP Foundation works for and with over a million older adults with low income, creating solutions that help them move from surviving to thriving.
A full-width hero which has a Brightcove Video player inside.
AARP Foundation works for and with over a million older adults, creating solutions that help them move from surviving to thriving.
This has TWO containers, one that shows only on desktop, and another that shows only on Tablet/Mobile. Use Layout mode to see them. Don't forget to copy/paste the hidden Tablet/Mobile container! The desktop's container has a background image at 1600x662px, and the Tablet/Mobile uses an article image component at 932x514px.
Make an Impact
AARP is looking for individuals who are inspired to give back. As a Smart Driver TEK Workshop Presenter, you'll introduce important, new vehicle safety technology to mature drivers in your local community and help them build the confidence to use it.
Make an Impact
AARP is looking for individuals who are inspired to give back. As a Smart Driver TEK Workshop Presenter, you'll introduce important, new vehicle safety technology to mature drivers in your local community and help them build the confidence to use it.
Using 3 pieces content using containers, text, and image (great for ai model or manual curation). All images use the standard 1140x655 editorial standard.
Oct 10, 12:00pm | Online
Sept 26, 1:00pm | Online
Oct 1, 12:00pm | In-Person
Oct 2, 2:30pm | Online
Similar to #14, but using Featured Tile components instead. All images use the standard 1140x655 editorial standard.
Date: December 3, 2025
This one is for Articles: It's supposed to look like how it was in UXDIA Channel Template but for some reason the font size is different and the images for Collection Layout are not the same.
Contents are still within the max 1200px fixed-width grid, but behind it can be a background color that spans the full width of the browser. The logos are all article image components that share the same aspect ratio. In this case, it is using 932x537.
Already a member? Renew Now
Maybe you need a full visual experience at the top and the main copy/CTA below it. This example has a container with a background color, and an article image component that is 889x500px.
Paragraph default. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Maybe in reverse the hero image is light, and the cta section has a bg color. Padding adjustments are made to the container, and the image is set to 'no padding' since it intentionally is cropped at the top/bottom. This example's article image component is 932x524px.
Paragraph default. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This example has a parent container with a background color, and inside it is a container with text on the left, and an article image component to the right. It is using a Getty image with a 3:2 ratio.
France enchants travelers with its romantic cities, world-class cuisine, charming villages, and breathtaking landscapes from the Eiffel Tower to the French Riviera.
This example has a parent container with a background color, and inside it is a container with text on the left, and an article image component to the right. It is using an image with a 3:2 ratio.
AARP Foundation works for and with older adults to strengthen financial resilience so that everyone can age with the opportunity to thrive. We are a charitable affiliate of AARP.
