Components

Alerts

Using alerts, you provide feedback for the user. Feedback could mean a neutral notice, a warning or a positive or negative message. We show alerts by means of snackbars or dialogs with button/s.

Snackbars

Snackbars differ by colour/s and also symbol/s.

Notice

Positive

Warning

Negative

Dialogs

Always use them over full screen grey or colour overlay.

UWAGA!

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Upozornenie. Integer posuere venenatis.

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Warning!

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Uwaga! Praesent commodo cursus magna

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Badges

Badges are primarily used to highlight something on your website. We use simple badges or badges with icon/s. We suggest using just one or two colours and one gradient at a time. Please be aware of the use of the colour from your selected theme.

Related: Themes Colours Icons

Simple badge

Simple badges highlight the most important part of your website. You can also use them as tags.

Badge

Badges with icon

In some cases we also use badges with an icon in order to help the user understand the communicated message more easily.

Badge

Badge colors

We suggest using just one or two colours and one gradient at a time.

Yellow
Orange
Pink
Purple
Blue
Green
Gradient 1
Gradient 2
Gradient 3
Gradient 4
Grey

Cards

Cards display structured content such as articles or website sections. We use four basic card types by which we sort our content on websites. See all our card types below.

Card types

Without image

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

With image

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Image in background

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Cards with date

20 Mar 2019

Title

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

20 Mar 2019

Title

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Cards with badge

Badge

Title

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Badge

Title

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Cards without padding

Badge

Title

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.

Dividers

With dividers, you can separate content in a text or other element. We use dividers in three different sizes and four widths. We also use vertical dividers to separate texts in one row.

Related: Themes Colours

Divider sizes

We use horizontal dividers in three sizes: 1pt, 2pt and 4pt. Use it according to your needs when composing texts.

Divider widths

The width of dividers is set to 24pt, 40pt, 56pt or 72pt.

Vertical dividers

Vertical dividers come in a single width only but in the same three sizes as the horizontal dividers: 1pt, 2pt and 4pt.

Divider colours

Please be aware of the use of the colour from your selected theme.

Forms

In our forms, we use an 8-point grid system (see more in "Grid System" section). In a simple contact form we suggest to use six basic inputs, the GDPR checkbox and one button to send the information.

Related: Grid System

Simple contact form

The simple contact form contains name, e-mail, number, country, file and message inputs. You can change the number of inputs according to its intended purpose on the website. When collecting any user information, always use the GDPR checkbox.

Sed posuere consectetur

Porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Duis mollis

Find out how we look after your personal data

Galleries

We use galleries which are both responsive and easy to control on a desktop as well as on mobile devices. Our preference is to use slider galleries or tile galleries with more images.

Slider gallery

To control a slider gallery we use left (previous) and right (next) arrows or slide controls (small dots centred above the lower edge of the gallery). The gallery can be used as a separate section on a website or placed inside an article.

Tile gallery

Tile gallery is a gallery with more visible images using square and rectangle-shaped images. The gallery can also be used as a separate section on a website or placed inside an article.

Hero

Hero image is often the first visual element a visitor encounters on a website. For backgrounds we only use the colours of our pulses or visually attractive images. Most importantly, the colours must always match the selected theme.

Related: Colours Themes Buttons & Links

Background pulse hero image

Colours and pulses must be always from the same theme.

Lorem ipsum dolor

Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

Background image hero image

When we use hero with a background image, we apply slight overlay of neutral Grey 1 colour at 30% opacity. Button colours must always match the selected theme.

One Waterloo

London, United Kingdom

Inputs

Inputs allow the user to input or select some information. We use four basic types of inputs: Text Fields, Selects, States and Checkboxes & Radios. We suggest you choose only one type of input depending on your design needs.

Text fields

Selects

States

Error message

Checkboxes & Radios

Location

When showing locations on a website we always use our own pointer icon. The icon can be used in any of our approved primary colours. But keep in mind that the colour must match the selected theme as with the rest of the website.

Related: Themes

Full width map

The pointer icon should always match the theme colour. The map can be also stylized to match the selected theme.

Map with location info

A map can be placed next to a text block holding additional information such as address or other contact information. The pointer icon and map colour should always match the selected theme.

Location

Twin City C,
Mlynske Nivy 12,
Bratislava, Slovakia

Pagination And Slide Controls

We help users to navigate through a website by means of numbered pagination or by slide controls in the form of clickable dots.

Related: Themes Colours

Default pagination

Colour of the active page must be the same as the colour of the selected theme.

Small pagination

Colour of the active page must be the same as the colour of the selected theme.

Slide control

Colour of the active page must be the same as the colour of the selected theme.

Popovers

A popover is a compact overlay that can be attached to any element on a website. We use it to add some additional information to a particular element. Our popovers come in a light or dark colour.

Light popovers

Top popover

Bottom popover

Left popover

Right popover

Dark popovers

Top popover

Bottom popover

Left popover

Right popover

Progress Bars

Via progress bars, we help users to indicate the abstract length of some process, i.e. loading of a website. We use linear and circular progress bars.

Related: Themes Colours

Basic (linerar) progress bars

Linear progress bars can be used with primary colours with a light background or white on dark or colour backgrounds.

Circular progress bar

Circular progress bars can be used with primary colours with a light background or white on dark or colour backgrounds.

75

Tables

Tables help users to easily read or compare different pieces of information. We use two basic types of tables: with header columns and with header rows. In both cases, please be aware of the use of the colour of your selected theme.

Related: Themes Colours Typography

Table with header column

In the header column always use the colour of your selected theme and do not forget to change the typeface.

Nairobi Norwich Quezon City Bristol
Norwich Brisbane Ottawa Beijing
Havana Lincoln Belfast San Diego
Abuja Porto Trondheim Bologna

Table with header row

In the header column always use the colour of your selected theme and do not forget to change the typeface.

Nairobi Norwich Quezon City Bristol
Norwich Brisbane Ottawa Beijing
Havana Lincoln Belfast San Diego
Abuja Porto Trondheim Bologna

Tabs

We use tabs to switch between views or subpages within the same context or information. You can choose between vertical or horizontal tabs. Below you can see three stages of button colouring in our tabs.

Horizontal tabs

Vertical tabs

Text Sections

In text sections, we use the Brandon Grotesque family typeface. We have defined a set of rules for using texts on our websites. Please consult the basic guidelines below.

Related: Typography Icons Themes Colours

Full-width centered texts

Use Brandon Grotesque Regular in either neutral black or our word mark grey for blocks of text. Brandon Grotesque Light can help to create a more elegant solution but always ensure it is legible.

Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.

Texts with subheadlines

Use Brandon Grotesque Bold and Medium to make headings, titles and statements stand out.

Sed posuere consectetur

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Texts with icons

Use Brandon Grotesque Bold and Medium with our icons. Please be aware of the use of colour from your selected theme. Icons and texts are always aligned to centre.

Lorem ipsum dolor

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor.

Maecenas sed diam

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor.

Eget risus varius

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor.

Texts with images

We use the same principle as we do with icons with the slight difference that texts with pictures are always aligned to left.

Duis mollis, est non commodo luctus

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor.

Nulla vitae elit libero pharetra augue

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor.

Erat porttitor ligula, eget lacinia odio

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor.