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:

1. 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.
2. Teaser image square: 584 x 584px
3. Teaser image rectangle: 1000 x 650px
4. Banner heading: No more than 3 words to name the donation page – to fit on one line.
5. Banner sub heading: No more than 85 characters to give additional context – to fit on two lines max.
6. Body heading: 90 characters to summarize the issue. Will ideally fit on 1 line, no more than 2 lines
7. 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.
8. Short url (if required)
9. ATD code
10. Array values(for appeals only) and default values with impact messages

2. 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

3. 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

4. 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

5. Petitions template
Click here to see a live example. 
Required Assests:

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

6. Anuual report template

6. Media release template
Click here to see a live example. 

7. 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

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