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
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

Newsletter subscription

Job application

Contacts

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

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

Default

Centered

Quote