Kinly Design Guide

This Design Guide provides examples of the most frequently used templates, and should be used as a reference when creating consistently high quality experiences for website users. This is the Title Block, which appears at the top of many pages. Only the Title field is required – but you can optionally include a paragraph of intro text like this. For a richer visual look (such as for customer case studies), you can include a Background Image.

Content Block

The Content Block is frequently used throughout the site. It consists of an optional intro section that includes a Label, Title and Text fields (like the block you're reading now), followed by one or more Content blocks below.

This is a content block with media left and text right

This is a content block with media left and text right

Each Content block includes a Layout field, which allow you to vary the position of media (image, video, quotation) alongside accompanying text blocks. We often style a series of Content blocks with alternating Layout = "Media Left/Text Right" and "Text Left/Media Right" to create an interesting layout for the user as they scroll down the page.

Content block with text left and media right

Content block with text left and media right

As you can see, this content block has the image on the left (on larger screens – for mobile users, the image always appears first – except when Layout = "Media Below Title & Text". The alternating layout makes for a dynamic reading experience. Instead of an image, this block includes a Pull Quote.

This is an interesting pull quote by a happy Kinly customer. If you include just a quote in a content block, and avoid entering anything in the Title and Text fields, then the quote will expand to fill the width of the page, like this.
Happy Person, ACME Widgets
This is a title

This is a title

Content blocks may have a background colour too – in most cases, it's best to use Light Grey or Light Blue. Orange and Purple can be too strong, and are best avoided as background colours.

This content block includes Sub Content blocks, which are useful if you need to introduce departments, for example, by including their name and a short blurb.

Department name

This is a short blurb about the department.

Another department

This is a short blurb about the other department.

A customers block is useful to introduce case studies. Each customer block includes an image, title and an optional link to the relevant case study. You may also include a Quote by the customer, which will be shown when the user hovers their cursor on the image.

University of Northampton

Without the ability to do remote checks, we’d have spent hundreds of hours a year physically visiting rooms and checking equipment. By doing those checks remotely, we’ve eliminated that time – saving in the region of £40–50k every year.

Erasmus University

We selected Kinly as our integration partner as we were confident they would deliver exactly what we needed, whilst involving us throughout the entire process.

Financial Institution

It's changing the way in which people interact with each other, the way they work both in and out of the office and the ability for them to collaborate in lots of different ways. It’s been a very positive change and sets a model for us for the future.

Column blocks are useful for laying out benefits

You can display multiple columns in a sequence, and use the Column Width menu to assign each block a size on larger screens. In general, it's best to keep the sizing simple, and opt for quarter or half width columns, so that the total for all blocks adds up to a whole number (for example, quarter + quarter + half = 1).

This is the title

This is the title

If you add a link to a column block, then the title will be clickable, and it will be shown with a link arrow appended.

This is another title

This is another title

If you add a link to a column block, then the title will be clickable, and it will be shown with a link arrow appended.

This wider column doesn't have an image

Images are optional. This larger column works well without one. You can see that for larger columns such as this, the font size of the Title is larger than for smaller columns like the one on the left (that's the case on desktop and larger screens – on mobile, all columns revert to the same size, filling the width of the mobile device).

Get to know more about Kinly solutions

The Form Block allows you to embed a Hubspot enquiry form, which you can copy and paste from the forms section of the Kinly Hubspot account. Make sure you copy and paste the correct form for your locale.

The Why Kinly block below includes interesting facts and stats about Kinly. Since this block is used across multiple pages and is translated into each language, it is not editable in the CMS.

Bringing people and technology together for better productivity wherever the work happens – because great things happen when people work together.

Experienced

Dedicated expertise in planning, supplying, integrating and managing AV systems integration and remote collaboration services.

Proven

Globally recognised businesses relying on us for secure and flexible meeting and collaboration services.

Independent

A leading partner with the world’s top vendors to deliver the best choice of solutions for public and private sector businesses.

Scale

An end-to-end provider of workspace transformation services with worldwide presence.

20+

Years Experience

2500+

Customers

500+

Accredited Specialists

250 M

Annual Turnover

1200+

Employees Worldwide

90%

Customer Retention

24x7

Global Support

20

Offices in 12 Countries