Callout block or Teaser cards

To create a callout block click the Teaser Cards component from the options at top of body block.

In the edit Teaser Card block window that pops up, choose either 2, 3, 4 or 5 cards and the colour of the call-to-action (CTA) buttons then click OK.

Type: 

  1. Two
  2. Two with image
  3. Three
  4. Three with image
  5. Four
  6. Five

Button:

  • Theme (for www this will be green, inside barnardos - purple)
  • Green
  • Orange
  • Pink
  • Purple 
  • Teal

No fields are mandatory in the Teaser Cards blocks.

To make the CTA button active (to make it send the user to the intended destination when they click it) use shift+arrow keys or mouse to select the entire text in the CTA field

then click the Link symbol Link icon in Drupal ​ from the icons at the top of the body block and add the full url (for external links) or the target node number (for internal links) in the URL field of the Add link popup.

You can get the node number from the url line of the target page in edit mode

Edit node in Drupal

and add it to the url field of the Add link popup

Edit links in Drupal

NB like all link text, the CTA text must be meaningful – must describe its destination – but as this is the title of a button it must also be brief. There’s currently no character limit set for the CTA field but avoid long sentences.

Donation callout cards

If you’re creating a donation callout card for a particular donation amount, 

you can select that amount in the live donate journey https://donate.barnardos.org.uk/ e.g. £25, then copy the url of the next page in the Donate journey

https://donate.barnardos.org.uk/donate?ref=&don_amount=25 as the link for your callout card CTA