Skip to main content
Search

Article takeaway block

This design pattern is due to be deprecated and shouldn't be used in future website designs.

What is an article takeaway block?

This block allows us to display key pieces of information for that article- audience (who the article is intended for) and the key 'takeaway' points of the article (the lift pitch!).

The article takeaway block is only allowed to be used on the following templates:

  • article page
  • centered article page

 

Related

View all blocks

Anatomy

Article takeaway block

article-takeaway-block.svg

Specification

  • 'Who is this article for (WITAF)': Intended audience information. For example; Customers who are interested in long term investing (required)
  • WITAF content: Short sentence. For example; Customers who are interested in long term investing (required)
  • Key takeaways: recommend 2-3 key takeaways per article. Short sentances/bullets were possible (required)
  • Icons appear by default
 
 

Usage guidelines

Do's

  • Who this article is intended for (WITAF)' - should be a single line of text.
  • Block can be only be used on article template and centralised article template
  • Article takeaway block spans fill width depending on template display ratio (70% left aligned or 60% centralised)
  • Mandatory fields within block: WITAF (max of 2), Key takeaways (max of 5) Recommendation to have 2-3 takeaways)
  • Block contains no optional fields
  • Design determines padding and heading style
  • Should only have 1 intended audience statement

Dont's

  • Article takeaway block does not contain images
  • Article takeaway block has no function
  • Content within each bulllet item should not be used for multiple lines of content - straplines and short sentances only
  • Headings should be determined in the back end, no editorial control
  • Article takeaway block should not to be used in a card container
  • Icons cannot be changed

Behaviour

  • No rollover state
  • No clickable elements
  • WITAF & key takeaways are required
  • Article takeaway block always spans to the width to the chosen template

Examples of use

Centred article takeaway block

Article takeaway example