Content block

The Content block component was created to offer an alternative 2-column layout option to our standard 1-column paragraph appearances. This allows the headline and introduction to the page content to stand out more, with the content indented down the page.

We’ve baked many features into this component, including the ability to:

  • Have a larger main section headline
  • Include a introductory paragraph (slightly larger text size than our default standard text size)
  • CTA and hyperlink capabilities
  • Add multiple H3 sub-sections with standard paragraph text size
  • Add image(s) and CTA options to the sub-section
  • Ability to turn component-level top padding on or off
    • Note: Use this is to solve “double” padding issues when stacking similar colored components together which may cause large gaps to appear, and get pre-approval for guidance from the Design Platform team

 

Publishing? View the DCR guidebook for detailed instructions.

Intro appearance Intro with sub-section appearances
Content Block-1,Paragraph-2,Advance Static Table-1,Paragraph-3,Content Block-2
Content Block-3,Paragraph-4,Advance Static Table-2

Main headline with introductory text

We’re making sustainability the new standard for investing. It’s our strong conviction that integrating sustainability can help investors build more resilient portfolios and achieve better long-term outcomes.

 

Throughout our entire history, we’ve continued to seek new ways of contributing to a more equitable, resilient future for all of our stakeholders as well as the people in the communities where we live and work.

See this component in action See this component in action

Rules and recommendations

Component elementOptional elementRules
Component elementA: Background color options Optional element Rules
  • • BLK_White (no top/bottom border options)
  • • BLK_Neutral
Component elementB: Headline Optional element Rules
  • • Main headline: 1 text size only (H2)
  • • Headline character count: ~70* (recommended - no limit is set in DCR)
Component elementC: Intro text Optional element Rules
  • • NOTE FOR PUBLISHERS: use “Intro text”, not “Content block para text” for this section
  • • Accent line colors: BLK_Yellow (default) or BLK_Orange
  • • No character count limit, but please keep this limited to 1 or 2 short introductory paragraph(s)
  • • Intro blurb can include hyperlink
Component elementD: CTA Optional element Rules
  • • CTA can be either a primary button or a tertiary link
  • • Keep these "digital" friendly; i.e. short descriptors
Component element*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release Optional element Rules
Showing 1 to 5 of 5 entries

Alternate variations

To help you visualize alternate background colors, we placed another component below to give you a more clear understanding of how this could look. You can also view this component on our UK site.

See live example

Main headline with introductory text

We’re making sustainability the new standard for investing. It’s our strong conviction that integrating sustainability can help investors build more resilient portfolios and achieve better long-term outcomes. Throughout our entire history, we’ve continued to seek new ways of contributing to a more equitable, resilient future for all of our stakeholders as well as the people in the communities where we live and work.