The Logo Splash tool can be used to display an array of logos from multiple organisations in an attractive grid. This is useful when your project involves multiple stakeholders or partners and you want to display a number of logos simultaneously without occupying too much space on the page.

The Logo Splash tool can be styled to create a number of different looks. Choose the style that best suits fits the surrounding content.

🖼️ Examples

Here's some examples of how you can configure the Logo Splash tool:

https://hdp-au-prod-app-hdp-thehivelearn-files.s3.ap-southeast-2.amazonaws.com/6915/4389/9669/minecraft2.png
https://hdp-au-prod-app-hdp-thehivelearn-files.s3.ap-southeast-2.amazonaws.com/6515/4389/9689/Joes2_3x-8_x200.png
https://hdp-au-prod-app-hdp-thehivelearn-files.s3.ap-southeast-2.amazonaws.com/8615/4389/9708/main-qimg-427ea660fd7638d2bbae0d81d7d18cf8.png
https://hdp-au-prod-app-hdp-thehivelearn-files.s3.ap-southeast-2.amazonaws.com/4315/4389/9725/fast-banana.png
https://hdp-au-prod-app-hdp-thehivelearn-files.s3.ap-southeast-2.amazonaws.com/5315/4389/9757/logo_1.png
https://hdp-au-prod-app-hdp-thehivelearn-files.s3.ap-southeast-2.amazonaws.com/1215/4389/9774/fake-logo-2.png

⚙️Settings

Settings you can configure in the Logo Splash tool:

Basic

  • Logos - add or edit the logo image files to be displayed. When adding a logo, the following attributes can be added/edited :
    • Logo image - Sets an image file for the logo.
    • Alternative description - Sets alt text to be used to assist people with screen readers.

Style

  • Style - sets the style of the logo grid display. Three options are available including:
    • None - Displays logos in an evenly spaced grid with no borders.
    • Bordered - Displays logos with a thin, grey border surrounding each logo with spacing in between each logo.
    • Grid - Displays logos with a thin, border surrounding each logo and no spacing in between.
  • Columns- sets the number of columns in the logo grid. This setting will be retained across all devices.
  • Image Size - sets the relative size that the logos will be displayed. Three options are available including:
    • Small - Max height of around 150px.
    • Medium - Max height around 200px.
    • Large - Max height of around 250px.
  • Grayscale - applies a black and white effect to remove colour from the logo files. Please note, this property may not work in all browsers. If this is essential, we recommend treating the logo files prior to uploading to the File Manager.

Advanced

  • Block Title - sets an optional title for the Block (e.g. ‘Partners’, ‘Supporters’, ‘Sponsors’, etc.).
  • Block Description - sets an optional description for the Block that will appear below the Block Title.

Practice tips

  • If the logos used are of all different shapes and sizes, try applying the ‘bordered’ or ‘grid’ style. This will help give them a more uniform appearance and help to ‘balance the eye’.