Block link

Block link is a visual way to display a list of links that are part of the same topic in a block style.  Its purpose is to highlight content belonging to the same topic in an engaging way. 

Preview

Customisation

The colours on a block component should match your brand’s approved theme.. It's important the colours meet the required colour contrast for accessibility with each tile background. There's a specific logic guiding the block link colours: 

• Tile 01 should be your brand light.
• Tile 02 should be nsw-palette-off-white.
• Tile 03 should be nsw-palette-grey-04.
• Tile 04 should be your brand dark.
• Tile 05 should be a dark colour from row 03 of the NSW Government Colour Palette. 

DCJ authoring guidelines

If various topics are needed, consider using the ‘cards’ component. See an example of the block link in use at https://dcj.nsw.gov.au/about-us/careers-at-dcj.html

Do:

• use link text that clearly identifies the target of the link. Do not use generic terms like 'click here', 'see', 'more' or 'more information'
• keep links short and intuitive for users to scan
• use the writing guide to ensure you keep the tone active.
• use images relevant to the topic or the link text

Do not use:

• for content that aren't related as this is likely to confuse users
• in a transactional service or a form
• to link to content on the same page, consider in-page navigation

Block style

There are two block styles to choose. One block style contains one feature image and four links styled as tiles. The second block style contains one feature image, three smaller images and five links styled as tiles. Images must relate to the associated content in the tiles.

Limits

• Only one block link per page is allowed. 
• Block link must contain a minimum of four links and maximum of five links. 
• Link text has a maximum character limit of 30. 

Responsive behaviour

On mobile screens, all images will be hidden when viewing this component to save space.  

Page type

Block link can be used on:

• campaign pages.

They cannot be used on:

• homepage
• landing pages
• content pages
• Easy Read.