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
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.
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.
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.
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.
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.
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.
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.
Rules and recommendations
Offset appearance
With our offset background, the hub tile cards sit outside the color background, and must only be paired with another BLK_white component to avoid a random white banding.
Note: This must get pre-approval to ensure proper use.
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.
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.
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.
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.
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.
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.
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options |
|
|||
| B: Headline & intro blurb |
|
|||
| C: Featured tile set |
|
|||
| c1: Featured: Image tile |
|
|||
| c2: Featured: Content tile |
|
|||
| D: Content tiles |
|
|||
| d1: Content tiles: Pictogram |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
• BLK_Neutral
• Optional: Headline character count: ~70*
• Optional: Intro blurb character count: ~350*
• Intro blurb can include hyperlink
• 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
• 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
• 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)
• 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)
• 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)