Banners & Callouts

These layouts can contain content and actions about a single subject, acting as an entry point to more detailed information.

Editor to Copy/Paste

1. Fixed-Width Static Banner with Image that Covers

This has a container with a gray background color, an article image component that covers within its container, text, and buttons.

H3 Heading custom img in left container fills it set to cover

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis interdum ligula. Sed pretium porta erat vel tempus.

Primary CTA

Secondary CTA

H3 Heading custom img in left container fills it set to cover

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis interdum ligula. Sed pretium porta erat vel tempus.

Primary CTA

Secondary CTA

Variation with rounded corners, white tile on gray background:

H3 Heading custom img in left container fills it set to cover

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis interdum ligula. Sed pretium porta erat vel tempus.

Primary CTA

Secondary CTA

Variation with smaller width:

H3 Heading custom img in left container fills it set to cover

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis interdum ligula. Sed pretium porta erat vel tempus.

Primary CTA

2. Fixed-Width Static Banner with Image that is Inset

This has a container with a gray background color, an article image component that is inset within its container, text, and buttons.

H3 Heading custom img inset within container

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis interdum ligula. Sed pretium porta erat vel tempus.

Primary CTA

Secondary CTA

H3 Heading custom img inset within container

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis interdum ligula. Sed pretium porta erat vel tempus.

Primary CTA

Secondary CTA

Staying Sharp's Scientific Research Program

Calling all citizen scientists! Work with Staying Sharp, universities and private research organizations to enhance our understanding of health, habits and cognitive aging.

Learn About the Program

H3 Heading custom img inset within container

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis interdum ligula. Sed pretium porta erat vel tempus.

Primary CTA

3. Fixed-Width Static Banner with Buttons on the Right

This has a container with a gray background color, an article image component that is set to cover within its container, text, and a button aligned to the right.

H3 Heading lorem ipsum dolor sit amet consectetur adipiscing

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

H3 Heading lorem ipsum dolor sit amet consectetur adipiscing

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

woman with short gray hair, long yellow shirt, sitting at counter, reading white tablet

Get the latest Brain Health updates

Enjoy the Staying Sharp monthly newsletters and relevant updates.

Tips for Living Your Best Life

When it comes to your health and well-being, knowledge is power. That’s why AARP has the latest, science-backed information on habits that support your health as you age and exercises that benefit your body and mind.

WHY ISNT THE BUTTON SHOWING UP:

Learn About Wellness

Staying Fit

Get inspired with workout routines and videos with exercises for every fitness level.

AARP's Guide to Pickleball

Learn all about the joy of the sport — how to score, tips for playing, ways to win and more.

Brain Health

Information to help you understand brain health and build awareness through research, reports and tips.

4. Fixed-Width Static Banner (2-Pack)

These have a container with a gray background color, an article image component that is set to cover within its container, text, and a button.

H4 Heading set img to cover

Lorem ipsum make image object-fit: cover within the container so it fits.

Small CTA

H4 Heading set img to cover

Lorem ipsum make image object-fit: cover within the container so it fits.

Small CTA

H4 Heading set img to cover

Lorem ipsum make image object-fit: cover within the container so it fits.

Small CTA

H4 Heading set img to cover

Lorem ipsum make image object-fit: cover within the container so it fits.

Small CTA

5. Fixed-Width Static Banner (2-Pack)

These have a container with a gray background color, an article image component that is inset within its container, text, and a button.

H4 Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

H4 Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

H4 Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

H4 Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

H4 Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

H4 Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

6. Black Banner Inside a Gray Full-Width Container

This is similar to many of the other layouts, but with the text and image reversed. It also has a full-width parent container that gives the whole section a background color.

H3 Heading custom img inset within container

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Primary CTA

Secondary CTA

7. Fixed-Width Static Banner

This fixed-width container has a gray background color, space for text, and an inset image.

H2 Lorem ipsum dolar sit amet

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.

Discover More Events

This category doesn’t have any upcoming events at the moment. Don’t miss out—check out virtual events or explore plenty of other events on the map.

H2 Lorem ipsum dolar sit amet

8. Full-Width Static Banner

This full-width container has a gray background color, space for text, and an inset image.

H2 Lorem ipsum dolar sit amet

9. Callout Boxes

These boxes are examples of similar layouts that can appear in a sidebar or as a callout within a body of article text. Or even in a row to highlight a section of important CTAs with descriptive context.