Page Sections: Banners

On Ashoka.org, we know that you may need to find graphically pleasing ways to showcase your text, images / videos, and possibly buttons into a 'banner'. We have 5 page sections specially designed for all your 'banner' needs and cravings. Feel free to explore each of them by clicking the links to the right.

Should you have a suggestion on improvements we should do with any of these designs (or additional types we should consider adding), feel free to write us at [email protected] and we would love to explore with you!

Take me back to the page section menu

Basic Image banner with Gradient

Basic image banner with impact strip

Banner with Image & Video

Call to Action Banner

Content Box - 2-column

Basic Image banner with gradient

The Basic image banner with gradient can help you to add a short description, a couple of buttons and a gradient that blends into an image of your choosing (the gradient comes in light blue, dark blue, and white). You can also change which side the banner image is on (right or left)

You can position the image to the right, left or center. You may need to add additional space to the 'text' of the banner to have the image show up in the way you wish it to. Feel free to experiment with this component to find the result you are looking for!

This is Button #1 Behold, Button #2

Basic Image banner with impact strip

The Basic image banner with impact strip is essentially the Basic image banner with gradient, but it as a strip below the button area where you can add different impact numbers (you can choose to add text before the numbers -- which can be in word form -- and also add links after the numbers themselves. We suggest for formatting reasons if you add text before the numbers, to add them for all the numbers themselves; and similarly to leave out the text on all if you leave it out on one)

You can position the image to the left or right like the basic image banner with gradient. You may need to add additional space to the 'text' of the banner to have the image show up in the way you wish it to. Feel free to experiment with this component to find the result you are looking for!

This is Button #1 You have encountered a Wild Button!

Ashoka staff ate

0

Cookies today

0 +

Fellows in 95+ countries

Elected

0 e

AYCers in 2023

Banner with Image / Video

The Banner with Image / Video is specially formatted and designed for videos (as well as rectangular static images) that pops out amidst a specified background image.

You can decide on the background layer color (white, black, light blue, or dark blue) for the Banner with Image / Video for an image to be set in the background, as well as the title, description, buttons, and main video / image which will happen in the foreground.

A button for your thoughts Be mindful of the button

Call-to-Action Banner

Need a slightly slimmer button that gets people to where you want them to go? Enter the CTA (call-to-action) banner, which boasts a title to one side, a brief description to the other side, and two buttons to send people to where you wish them to go.

CTA banners come with an option to add a background image, and a choice between 4 background layers (white, black, dark blue, light blue), and one can alter which side the title will be on (the right or the left)

This action will make your jaw drop This action will make it drop lower

Content Box – 2-column

This content block is a hybrid banner / column component that is useful for breaking up large blocks of text into two: an image is on one side (which will be the size you upload it so be sure to check the dimensions before uploading!), and long paragraph text is on the other side (which you can space to fit the image through formatting or spacing).

Background color options are: white, light blue, and dark blue. This block looks especially good with a transparent png image or icon like the one to the right.

Dummy text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas imperdiet commodo odio vitae porttitor. Integer ex nisl, elementum a leo non, consectetur facilisis est. Mauris volutpat dui lorem, ac ultricies augue ultrices vel. Vestibulum euismod volutpat mattis. Morbi eu mauris non metus euismod sodales in ut est. Nunc eleifend velit id augue tincidunt mattis. Vestibulum lacinia lorem a pellentesque facilisis.

Optional Button 1