The banner component is used to show bold WWF imagery alongside a message. It has various modifiers to help suit different imagery. Buttons and links can also be used as a strong call to action.
There are two species of orang-utan – the Bornean and the Sumatran. Orang-utans used to roam as far north as southern China, and as far south as the Indonesian island of Java. Today they’re only found on two islands – Sumatra and Borneo.
Adopt an orang-utan Donate| Modifier class | Purpose |
|---|---|
banner--hero | increase height of banner |
banner--invert | invert text color |
banner--pull_below | pull up content below banner to overlap with banner |
banner--white_overlay | change overlay color to white |
banner--no_overlay | remove overlay |
banner--callout_box_padtop | place callout box at top of banner |
banner--callout_box_padbottom | place callout box at bottom of banner |
banner--callout_box_text_center | center callout box |
The banner carousel can be used to communicate several messages and images in one component without adding extra height to a page or forcing users to scroll, instead users can navigate the banner left and right.
WWF are the world’s leading conservation organisation. We have a hugely important mission and our goals are ambitious – we’re here to stop the degradation of our Planet’s natural environment, and build a future where people live in harmony with nature.
How we are preventing deforestationWWF are the world’s leading conservation organisation. We have a hugely important mission and our goals are ambitious – we’re here to stop the degradation of our Planet’s natural environment, and build a future where people live in harmony with nature.
WWF are the world’s leading conservation organisation. We have a hugely important mission and our goals are ambitious – we’re here to stop the degradation of our Planet’s natural environment, and build a future where people live in harmony with nature.
WWF are the world’s leading conservation organisation. We have a hugely important mission and our goals are ambitious – we’re here to stop the degradation of our Planet’s natural environment, and build a future where people live in harmony with nature.
How we are preventing deforestationWWF are the world’s leading conservation organisation. We have a hugely important mission and our goals are ambitious – we’re here to stop the degradation of our Planet’s natural environment, and build a future where people live in harmony with nature.
How we are preventing deforestationIdeal for sharing multiple links with a common theme.
Hundreds of thousands of species live here. The Amazon river itself runs for more than 6,600km, and contains over two and a half times as many freshwater fish species than any other river.
| Modifier class | Purpose |
|---|---|
carousel--invert | white text with dark background |
The Image Banner component is used to display a single image. It's ideal for showcasing the beautiful, rich WWF imagery.
The Link Grid displays various animal imagery along with additional information about their location and endangerment level.
| Modifier class | Purpose |
|---|---|
grid_wrapper--large | wider link grid |
grid_wrapper--ontop | higher z-index |
A component used to display a google map alongside a text block.
Orang-utans inhabit the tropical rainforests of Borneo and Sumatra. Their numbers have declined by around 50% in the last 60 years, mainly because of the loss of these forests.
The orang-utan’s habitat is also home to other threatened animals – like the Sumatran tiger, clouded leopard, Asian elephant and Sumatran rhino. So by conserving the orang-utan’s habitat, we’re also benefiting other key species.
The Media Panel displays a grid of blocks. The blocks keep their aspect ratio as the browser window changes size. Blocks can be one-third or two-thirds wide, but they cannot be used in any combination due to how the layout changes for mobile devices. Each block when hovered show an animated social share button in the upper right corner.
This is an example of the The Media Panel component, but displaying the optional video blocks.
This is an example of the The Media Panel component, but displaying three standard blocks, with no read more option.
The membership form is an interactive component that allows users to donate to WWF with a monthly, or one-off donation. The background of the component changes image depending on which animal is selected.
Temporary example
The Play Banner component is used to show a youtube video when the play button is clicked. The youtube video is inside of the .modal element which is found in the root of the body on all pages. The .modal_overlay element is an adjacent sibling of this element and is also required for the modal background.
The Quote & Link Block is used to share interesting insights from an individual, such as a wildlife expert. This component can then link to a page with more information.
Drew McVey Orang-utan Expert “Hi, I’m Drew! I have just returned from Sumatra and Borneo; where I had a chance to catch up with the Orang-utan species and to reflect on what we are working on to protect them.”View profile
The Related Content component is a way of sharing related information at the end of a section or page, allowing users to click through and learn more about a specific subject. The blocks can be one-forth or two-forths wide, but can only be used in certian combinations (two-one-one, one-one-two and two-two), due to reposnsive contraints.
| Modifier class | Purpose |
|---|---|
content_link--wide | for blocks that are wider (half width) |
A simple carousel that bleeds off of the edge of the page. Each block is a link with a learn more call to action below a heading and a message.
The Success Banner is similar to the standard Banner component, but features a white callout box, with 'Success Story' tag. Modifiers allow for adjustments to suit different images.
This Earth Hour, switch off your lights and celebrate with us on 19 March at 8.30pm to show you care about our brilliant planet
This Earth Hour, switch off your lights and celebrate with us on 19 March at 8.30pm to show you care about our brilliant planet
| Modifier class | Purpose |
|---|---|
banner--invert_tag | invert text color |
banner--white_overlay | change overlay color to white |
banner--no_overlay | remove overlay |
banner--callout_right | place callout box to the right |
banner--callout_grey | change callout box color to grey and background color to white |
This Text & Image Block component is used to display text on the left with an image on the right. The example shows the component being used to show animal endagerment levels.
Affected by: Illegal Wildlife Trade and Human Expansion
Affected by: Illegal Wildlife Trade and Human Expansion
Orang-utans are known as gardeners of the forest – playing a vital role in seed dispersal, especially for large seeds that are not spread by smaller animals.
The people of Borneo and Sumatra depend on the orang-utan’s forest for food, water, income and defence. For example in the 2004 tsunami, coastal orang-utan habitat in Sumatra protected the communities that lay behind it by absorbing the power of the waves. Communities not sheltered this way faced devastation – losing property and lives.
This component can be used to display text on the right with an image on the left. Buttons and links can be used inside the content for further flexibilty.
Struggling to find inspiration in your fundraising? Read our articles and guides for helpful tips and advice.
Fundraising ideas Guides Join on Facebook
| Modifier class | Purpose |
|---|---|
text_image_left--pad_top | padding top |
This component can be used to display text on the left with an image on the right. Buttons and links can be used inside the content for further flexibilty.
None of our challenges take your fancy? You can still fundraise by entering other challenges or organising your own fundraising activity.
I'm taking part in my own event Who are Team Panda?
A carousel that displays text and image for each slide with a read more link.
This is by far the biggest problem in the Amazon. Huge areas of rainforest are destroyed by clearing for agriculture, illegal or unsustainable logging for timber, and for industrial or urban development. The basic problem is that not enough value is placed on the natural environment – it’s often seen as more economically viable to cut the forest down than keep it standing.
Read moreIncreasing global demand for food, especially meat, has led to Brazil becoming the world’s biggest beef exporter, and the second-largest exporter of soybeans, which are mainly used for livestock feed. Forests are often cleared to make way for grazing land or soya plantations.
Read moreAs well as farming and urban sprawl, the growth of hydropower dams, mines and oil wells – and the road networks to serve them – have all had impacts on the Amazon. These may be wanted for economic development, but if they’re poorly planned or managed they can cause serious environmental harm.
Read more| Modifier class | Purpose |
|---|---|
carousel--invert | white text with dark background |
A bold, image led, banner ideally used as a page heading.
| Modifier class | Purpose |
|---|---|
banner--yellow | yellow background on callout box |
banner--white | white background on callout box |
banner--pull_below | pull up content below banner to overlap with banner |
The video banner shows a title message and a play button, which will open a youtube video. The youtube video is inside of the .modal element which is found in the root of the body on all pages. The .modal_overlay element is an adjacent sibling of this element and is also required for the modal background.
WWF are the world’s leading conservation organisation. We have a hugely important mission and our goals are ambitious – we’re here to stop the degradation of our Planet’s natural environment, and build a future where people live in harmony with nature.
