Hub tiles

The Hub tile component was created for users see different topics related to a category and get a little bit of information before deciding which direction they want to explore on that topic. Use this for all Hub landing pages to ensure consistency across our ecosystem.

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

  • Include a larger main section headline & introductory copy block
  • Hyperlink capabilities within the intro copy block
  • Add a “featured” tile section with image
  • Include a pictogram in each tile to help visualize the specifc tile topic
  • Include a main headline, with optional sub-headline for more context for each tile
  • 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.

Full bleed appearance Offset appearance
Paragraph-2,Hub Tiles-1,Paragraph-3,Advance Static Table-1
Paragraph-4,Hub Tiles-2,Paragraph-5,Advance Static Table-2

Full bleed appearance

With our full-bleed appearance, the tile cards sit within the color background. It is our default appearance.

For the “Featured” tile cards, you have the choice of where the image gets cropped from across different breakpoints; center, left or right side of the image container. This works for either right-side or left-side image orientation. See our “Image placement & cropping guide” for more details.

OPTIONAL EYEBROW

How we help more people experience financial well-being

Optional intro paragraph text goes here. It has a hyperlink, & max character count is set to 350, and the headline character count is 70.

Featured tile headline
Sub-headline goes here and has 95 characters max

This should max out at 350 characters. Our alternatives platform has enabled clients to finance infrastructure projects throughout the UK, including £1.2 billion in renewable power projects across the UK, powering 1.8m UK homes annually.

Primary button goes here Primary button goes here
Main content headline
Sub-headline goes here and has 95 characters max

This should max out at 350 characters. Our alternatives platform has enabled clients to finance infrastructure projects throughout the UK, including £1.2 billion in renewable power projects across the UK, powering 1.8m UK homes annually.

Primary button goes here Primary button goes here
Main content headline
Sub-headline goes here and has 95 characters max

This should max out at 350 characters. Our alternatives platform has enabled clients to finance infrastructure projects throughout the UK, including £1.2 billion in renewable power projects across the UK, powering 1.8m UK homes annually.

Primary button goes here Primary button goes here
Main content headline
Sub-headline goes here and has 95 characters max

This should max out at 350 characters. Our alternatives platform has enabled clients to finance infrastructure projects throughout the UK, including £1.2 billion in renewable power projects across the UK, powering 1.8m UK homes annually.

Primary button goes here Primary button goes here
Main content headline
Sub-headline goes here and has 95 characters max

This should max out at 350 characters. Our alternatives platform has enabled clients to finance infrastructure projects throughout the UK, including £1.2 billion in renewable power projects across the UK, powering 1.8m UK homes annually.

Primary button goes here Primary button goes here

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 & intro blurb Optional element Rules• Optional: Eyebrow character count: ~35*
• Optional: Headline character count: ~70*
• Optional: Intro blurb character count: ~350*
• Intro blurb can include hyperlink
Component elementC: Featured tile set Optional element Rules• Image tile + content tile is a set — both are displayed together
• Placement can be 1st row, or last row only
• Image tile can be either left or right orientation (swap placement)•
• Pictogram is not available for this featured tile set
Component elementc1: Featured: Image tile Optional element Rules• Image dimensions: 700x650px (JPG)
• Image position lock — see demonstration here
   • Center of the image container
   • Left side of the image container (default position)
   • Right side of the image container
• All image assets must be optimized for the web: <300kb
Component elementc2: Featured: Content tile Optional element Rules• Tile background color options: BLK_Pink or BLK_Yellow
• Optional: Eyebrow character count: ~35*
• Mandatory: Headline character count: ~70*
• Optional: Subheadline character count: ~95*
• Mandatory: Intro blurb character count: ~350*
• Mandatory: CTA — Primary button only (hard coded)
Component elementD: Content tiles Optional element Rules• Tile background color options: BLK_White ONLY
• Min 2 tiles, Max 10 tiles (not including Featured tile) 
• Mandatory: Headline character count: ~70*
• Optional: Subheadline character count: ~95*
• Mandatory: Intro blurb character count: ~350*
• Mandatory: CTA — Primary button only (hard coded)
Component elementd1: Content tiles: Pictogram Optional element Rules• Pull from our custom library. No need to resize or provide graphic, just provide the graphic name to your publisher
• Asset dimension (if supplying yourself): 75x75px graphic (SVG/PNG)
• Only use transparent assets
• Only use transparent assets
• Do not use photography in this appearance; pictograms or similar graphical elements only (read Iconography guidelines)
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 8 of 8 entries