1. Tutorials
  2. Paragraph Options Layouts
  3. Logo Set

Logo Set

View the example page to see this paragraph-type in action.

Logo Set example

Guidelines for use

  1. This block is always used at 100% width of the page container (not the browser window).
  2. If the heading and description fields are filled in, then the links will stack into two columns. If the heading and description fields are left empty, then the links will go to a 4 width column layout.
  3. You can put an unlimited amount of images.
  4. Images will display in order from left to right in the same order they are input into the editor window.

  1. Use this paragraph to add linked logos in a row or grid
  2. Try not to mix internal site links with links out to other sites in the same logo set paragraph.
  3. Though the number of images is unlimited, a giant set starts to pose usability issues - i.e. a long list can be hard to sift though. If you have more than 10-12 items in a set, introduce categories/headings to break your content into separate lists.

Elements

Title: An optional <h2> heading (required when "Description" text field is filled). Maximum character count: 100.

Description: Optional <p> paragraph text. Maximum character count: 500

Image: Optional. Uses a Font Awesome icon picker tool.

Link: Optional. Add a URL that the image should link to.

Some websites may wish to list a set of logos of affiliated groups, and link end users to additional information. 

Use of this Logo Set paragraph is most appropriate for linking users to a company depicted by the logo.

 

Images will stack on mobile.

How to implement

  1. Create a Basic Page.

  2. Scroll down to the Paragraphs section, click the drop-down arrow, and click "Add Logo Set".
    Selecting Add Logo Set Container Menu Item

  3. Proceed to the Overview of a Image Set section of this guide below. 

  4. Once you've added your Image Set content, choose your publishing options and click Save at the bottom of the page.

Overview of Logo Set

Overview of A Logo Set Paragraph

  1. Click and drag the crosshairs handle to rearrange your paragraphs.
  2. Remove this entire paragraph.
  3. (Optional) Title - this title appears to the left of the images. Restricted to 100 characters
  4. Background colour of logo set
  5. (Optional) Body - this body appears to the left of the links. Restricted to 500 characters
  6. Click and drag the crosshairs handle to rearrange your images.
  7. Remove this individual image set.
  8. Image – you can either upload a file directly to the page, or open the file browser to upload the file to the site's central file repository. It is recommended that you open the file browser to upload, so that you can reuse the image in the future. Once the image is uploaded be sure to add descriptive text to the Alternative Text field.
  9. Link – add the link that users should be directed to when clicked.
  10. Link text – this should be the name of the company.
  11. Add another image set.
  12. Anchor ID - add a unique ID for the section. You can use this when adding a link that you'd like to go directly to the Logo Set paragraph.