Styles
Grid
Components
Utilities

Jak zorganizować pracę hybrydową, aby mieć wyniki i święty spokój?

23 Września

15:00 - 16:00

Szkolenie online dla menedżerów Business Services / Back Office

Typography

Typeface
Sofia pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Element - 4.4rem / 1.1 / Normal

H1

Element - 2.2rem / 1.1 / Normal

H2

Element - 1.2rem / 1.2 / Medium

H3

H3

Element - 0.8rem / 1.1 / Medium

H4

Class
H1
Class
H2
Class
H3
Class
H4
Typeface
Open Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Note: The body font should be set on the root 'Body (All Pages)' tag.
Paragraph Big (p-big) - 1.2rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph - 1rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph Small (text-small) - 0.8rem / 1.4 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ordered List - 1rem / 1.5 / Normal
  1. Example Ordered List
  2. Example Ordered List
Unordered List - 1rem / 1.5 / Normal
  • Example Unordered List
  • Example Unordered List

Color

Blue

Primary Accent Color
#28A745

Color Base

Base Font Color
#212121

Gray

Mid Tone
#AEB0B5

Light Gray

Light Background Color
#F1F1F1

Green

#20C788

Red

#FF4467

Salmon

#F29888

"Myślę, że najważniejszym efektem jest możliwość mierzenia naszych operacji. Bez pomiaru, nie możemy powiedzieć, czy osiągnęliśmy nasze cele […], nie możemy nawet dobrze policzyć naszych kosztów."

Rafał Kozłowski
CFO, Wiceprezes

"Już po jednym miesiącu było widać efekty tego wdrożenia. Mogliśmy zobaczyć, zmierzyć i zaobserwować nową rzeczywistość."

Waldemar Hlebowicz
Dyrektor Zarządzający

"Zmieniliśmy nasze nastawienie – teraz koncentrujemy się na optymalizacji. Kiedy przychodzi nowy kontrakt, nie musimy zatrudniać dodatkowych pracowników. Zwrot z inwestycji w projekt to ponad 347% po 12 miesiącach."

Tomasz Brożyna
Regional COO East Europe

"To była bardzo lekka implementacja, zajęła w zespołach parę dni i zespoły były gotowe do rejestrowania czasu i wykorzystywania tego oprogramowania."

Tomasz Tuszyński
Operational Excellence Manager

"Po pierwsze, mamy transparentne dane do analizowania naszej pracy, czasu, aktywności, oraz tego, co możemy usprawnić, gdzie mamy szukać obszarów usprawnień."

Katarzyna Kielak-Kępa
Team Leader

"Osiągnęliśmy 30% wzrostu produktywności w pilotażu. Obecnie pracownicy chcą stale się rozwijać – to jest ich droga do perfekcji, choć wiedzą, że jest to podróż, która nigdy się nie kończy."

Renata Kabas-Komorniczak
Partner BPO

"Myślę, że najważniejszym efektem jest możliwość mierzenia naszych operacji. Bez pomiaru, nie możemy powiedzieć, czy osiągnęliśmy nasze cele […], nie możemy nawet dobrze policzyć naszych kosztów."

Rafał Kozłowski
CFO, Wiceprezes

"Mamy wiele efektów: zmieniliśmy podejście, w końcu mamy czas na usprawnienia, zwiększyliśmy terminowość i jakość, wystandaryzowaliśmy nasze procesy."

Rafał Kozłowski
CFO, Wiceprezes

"Pracownicy nie mają już obaw, aby mówić nam, co powinniśmy usprawnić. Za to nam udaje się ich przekonywać, że to oni są w stanie wpływać na usprawnienia. Nie boją się rozmawiać z nami."

Renata Kabas-Komorniczak
Partner BPO Poland

"Dla mnie to magiczne. Sposób działania tego narzędzia jest magiczny."

George Bouamrirene
Transformation Manager

"Liderzy zespołów mają w końcu czas na zarządzanie ludźmi, a nie muszą się wciąż zajmować zadaniami."

Rafał Kozłowski
CFO, Wiceprezes

"O wiele mniej stresu — mam pewność, że priorytetowe zadania zostaną wykonane."

Katarzyna Fita
Dyrektor ds. Rachunkowości i Podatków

"Kierownikom jest o wiele łatwiej — mają w jednym miejscu dane z wielu raportów i wielu źródeł."

Rafał Kozłowski
CFO, Wiceprezes

"Wypracowaliśmy sobie pewne standardy, co spowodowało, że praca teraz jest przyjemnością, a nie stresem, jak wcześniej."

Anna
Specjalistka

"Zielony KPI stał się ważny dla zespołu. Pracownicy rzeczywiście mają fun z realizacji zadań. Po uprzedniej obojętności nie ma już śladu, zadziała się magia."

Katarzyna Fita
Dyrektor ds. Rachunkowości i Podatków

"85 proc. faktur czekało w kolejce dłużej niż 5 dni, rekordziści — dobrze ponad 100 dni. Obecnie KPI jest realizowany codziennie i wszystkie faktury, które nie mają wstrzymań są realizowane w jeden dzień."

Katarzyna Fita
Dyrektor ds. Rachunkowości i Podatków

"Nie wiedzieliśmy kto, co robi i na jakie zadania idzie czas pracowników. Dzięki Harmodesk ich praca stała się widoczna, uzyskaliśmy na ten temat twarde dane i dzięki temu możemy zarządzać."

George Bouamrirene
Transformation Manager

"Projekt przekroczył wszelkie oczekiwania. Stawialiśmy sobie cel 30-procentowego wzrostu efektywności, tymczasem nasza efektywność wzrosła dwukrotnie."

Waldemar Hlebowicz
Dyrektor Zarządzający

"Zrobiła się taka ogólnozespołowa odpowiedzialność za wynik — oni naprawdę odczuwają potrzebę realizacji KPI."

Katarzyna Fita
Dyrektor ds. Rachunkowości i Podatków

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

Heading

Heading

Heading

Heading

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

Cards

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Getting Started

Columns need to be nested within  a "row" and a direct child of a "container".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined. 

col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

 no-gutters
no-gutters
no-gutters
no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.

col
col
col
col

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

col-lg-1
col-lg-11
col-lg-2
col-lg-10
col-lg-3
col-lg-9
col-lg-4
col-lg-8
col-lg-5
col-lg-7
col-lg-6
col-lg-6
col-lg-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4
col-8
col-6
col-6
col-3
col-2
col-7

Vertical Alignment

Align-Start

To align columns from the top, combine a class of  "align-start" preceded by the class of "row"

align-start
align-start
align-start

Align-Center

To align columns from the center, combine a class of  "align-center" preceded by the class of "row"

align-center
align-center
align-center

Align-End

To align columns from the bottom, combine a class of  "align-end" preceded by the class of "row"

align-end
align-end
align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of  "justify-start" preceded by the by class of "row"

justify-start
justify-start

Justify-Center

To align columns from the right, combine a class of  "justify-center" preceded by the class of "row"

justify-center
justify-center

Justify-End

To align columns from the right, combine a class of  "justify-end" preceded by the class of "row"

justify-end
justify-end

Justify-Between

To evenly space columns between each-other, combine a class of  "justify-between" preceded by the class of "row"

justify-between
justify-between

Justify-Around

To evenly space columns around each-other, combine a class of  "justify-around" preceded by the class of "row"

justify-around
justify-around

Self-Align Columns

To individually self-align columns, combine a class of  "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start
self-center
self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

order-last
order-first

Column Extra Padding

To add extra inner padding to columns, combine a class of either "extra-pad-left", "extra-pad-right", preceded by the by class of "col"

extra-pad-right
extra-pad-left

Navigation

This is an example of a basic navigation, and it can be modified as desired to make the brand style or aesthetic.

Footer

This is an example of a basic footer. It can be modified as desired, and the generalconcepts to retain are contact info, reiterated nav links, a logo and copyright.

Interactive

Open Modal

What is the sound a doggy makes?

plus

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What is the sound a doggy makes?

plus

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

What is the sound a doggy makes?

plus

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Custom Form Elements

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'dynamic-preference' class to input-group.
  • Add 'dynamic-preference-1' ID to input-group.
  • Add 'first-preference' ID to the input.
  • Add 'add-preference' ID to the add button.
  • Add 'remove-preference' ID to the remove button.
  • Add 'remove-btn' class to the remove button.
  • A 'remove-btn_show' class should exist to set the remove button to show again.

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'dynamic-option' class to input-group_col.
  • Add 'dynamic-option-1' ID to input-group_col.
  • Add 'first-option' ID to the first input.
  • Add 'first-example' ID to the second input.
  • Add 'add-option' ID to the add button.
  • Add 'remove-option' ID to the remove button.
  • Add 'remove-btn' class to the remove button.
  • A 'remove-btn_show' class should exist to set the remove button to show again.

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom CSS and JS in page settings and apply the below:
  • Add 'date' class to the input field.

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'tab1' through tabX to each tab menu link.
  • Add 'to_tab1' through to_tabX to each next or back button.
  • Add 'form-step1' through form-stepX to each tab pane.

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom CSS and JS in page settings and apply the below:
  • Add 'int-phone' class to the input field.

Custom Card Slider

Copy labeled custom CSS and JS in page settings and apply the below:
  • Add 'card-slider_wrapper' class to list wrapper element (or collection list wrapper element).
  • Add 'owl-carousel, owl-theme, and card-slider' classes to the list item (or collection list element).
  • Add 'card-slider_item' to the single card element (or collection item element).
  • Create separate nav wrapper element and add class 'card-slider_nav'.
  • Add 'card-slider_left' ID to the left nav button within the 'card-slider_nav' wrapper.
  • Add 'card-slider_right' ID to the right nav button within the 'card-slider_nav' wrapper.

Spacing

mb-1 (margin-bottom: 12px;)
mb-2 (margin-bottom: 28px;)
mb-3 (margin-bottom: 48px;)
m-0 (margin: 0;)
mt-3 (margin-top: 48px;)
mt-2 (margin-top: 28px;)
mt-1 (margin-top: 16px;)
p-0 (padding: 0;)
pt-0 (padding-top: 0;)
pb-0 (padding-bottom: 0;)

Text

text-primary
text-primary
text-dark
text-gray
text-center
text-right
text-left
d-none
font-heading
font-body

Other

overflow-hidden
overflow-visible
d-none
d-block
d-flex
sr-only
sr-only
Add-a-field Unhide

Internet Explorer Card Fixes

Set both the 'card' and 'card-body' classes to display:block only in IE to prevent text overflow and layout shift issues due to Flexbox.

Learn More