Skip to main content
Search

Article block

What is an article block?

The article block is used to highlight primary messages/content or a specific call to action. Article blocks allow for prominent content to be pulled out and highlighted.

A primary and secondary call to action can be added as optional features. This block is useful for promoting articles or to introduce a webpage.

Related

View all blocks

Anatomy

Article block

Specification

  • Header (required)
  • Text (required)
  • Primary CTA (optional)
  • Additional link (optional)
  • Image or video - W 460px - H 280px (optional)

Usage guidelines

Do's

  • The article block can be used on any template
  • The first CTA must be in the primary style
  • Images can be used to add more prominence to this block
  • Use this card instead of a general content block to display videos on a page.
  • Background colour can be changed if you require more prominence but use this sparingly.
  • For content which is part of a series (using mutliple article blocks), having the images or videos all on the same side can aid scanning. When this block is used for content not part of a series having images and videos on alternate sides is something to consider.

Dont's

  • Supporting text should not extend beyond the height of the image or video (if included)
  • Exception to the rule above, is when using within 'Articles blocks' to show specific chapters or articles within a longer article (mainly on QI). IN this instance, article block can be used to reduce sentence length and improve readability
  • Keep supporting text short and concise
  • Use with 'Centred Article template' if you are displaying an image

Behaviour

  • Default layout is supporting text aligned left and image/video aligned right.
  • The image/video can be aligned to the right
  • Standard rollover state on the button should apply
  • Supporting text defines the height of the block
  • Call to action options are primary and secondary

Example article block

H2 - Title of block goes here

Text goes here: Lorem ipsum dolor sit amet. Aut aperiam accusantium hic sint laboriosam non molestias ratione rem laborum officiis id rerum possimus. Aut culpa quia ea deserunt rerum vel illum molestiae ab quia iusto. Est placeat repellendus sed obcaecati officia ut tempore possimus.