This page serves as a guideline for main page templates and widget functionality on the website

Content

1. Page templates
2. Widgets

1. Page templates

1. Right-aligned donation form template 

Required Assests:

• Banner Image: 1600 x 675px If the banner is light on the left-hand side, please darken it so the banner heading will be visible.
• Teaser image square: 584 x 584px
• Teaser image rectangle: 1000 x 650px
• Banner heading: No more than 3 words to name the donation page – to fit on one line.
• Banner sub heading: No more than 85 characters to give additional context – to fit on two lines max.
• Body heading: 90 characters to summarize the issue. Will ideally fit on 1 line, no more than 2 lines
• SEO checked body copy: Up to 250 words to explain how the donation helps. 
  NB: Please note that on mobile, this copy stacks before the donation form, so the longer 
  the copy the further down the donation form will be.
• Short url (if required)
• ATD code
• Array values(for appeals only) and default values with impact messages

2. Content rich side-by-side template

Required Assests:

• Banner Image: 1600 x 675px If the banner is light on the left-hand side, please darken it so the banner heading will be visible.
• Teaser image square: 584 x 584px
• Teaser image rectangle: 1000 x 650px
• Banner heading: No more than 3 words to name the donation page – to fit on one line.
• Banner sub heading: No more than 85 characters to give additional context – to fit on two lines max.
• Body heading: 90 characters to summarize the issue. Will ideally fit on 1 line, no more than 2 lines
• SEO checked body copy: Up to 250 words to explain how the donation helps. 
• Short url (if required)
• ATD code
• Array values(for appeals only) and default values with impact messages
• All other copies and image requirements for the widget on the left side are the same as mentioned under the "Widget" section.

3. Hybrid donation form template

Required Assests:

• ​Banner Image:  1600 x 1400px
• Teaser image square: 584 x 584px
• Teaser image rectangle: 1000 x 650px
• Body heading: ~8 words
• SEO checked body copy
• Short url (if required)
• ATD code
• Array values and default values with impact messages

4. Donation thank you page template 

These pages will be hidden from the website and search results and will only be visible after completing a donation.

Required Assests:

• Banner Image: 1600 x 675px
• Body copy

5. eDM thank you page template 

Same template as donation Thank You page. These pages will be hidden from the website and search results and will only be visible via an eDM.

Required Assests:

• Banner Image: 1600 x 675px
• Body copy

6. Petitions template

 Required Assests:

• Banner Image: 1200 x 560px
• Body image: 300 x 300px
• SEO checked body copy

7. Anuual report template

8. Media release template

9. General landing page template

Clcik on each link to see live examples. This template is used with using different widgets for Our stories, Programs, SEO and all other general welpages

Required Assests:

• Banner Image: 1600 x 675px If the banner is light on the left-hand side, please darken it so the banner heading will be visible.
• Teaser image square: 584 x 584px
• Body Images: 1000 x 650px
• Banner Heading
• Banner sub heading
• H2 heading (1st heading in the copy)
• SEO checked copy

2. Widgets

1. Banner widget

- This is a must on any pages (excluding Media Releases; use the 2nd header widget) on the website. Up to 5 anchor links (links within the same page) can also be used if there's a special requirement approved by digital.
Image size: 1600 x 675px

2. Title header widget

3. Text Block

- Used to enter the body copy of a page.

This is a H2 heading

This  is H3 a heading

This  is H4 a heading

This is paragrap style that uses for body copy. "italic"  Text ^{[superscript*]} small text.

4. Pull Quote widget

5. Text Media widget

- This can be used to link to another page or to show an video. If there are more than one text media widgets, we swap the text and image as below. The background color of the first widget will be light grey, and the background color of the second widget will be white. If there are more than two widgets, the same order repeats.

Image size: 584X390 px
Word count: 50-60 words

6. Featurette image widget

7. Four colum widget

8. Feature Video

9. Gallery widget

10. CTA widget

11. Impact calculator

12. Donation banner

13. Timeline widget