Color Palette

Typography

Headline 1: Lorem ipsum

Headline 2: Lorem ipsum Dolore eiusmod.

Headline 3: Lorem ipsum Cupidatat irure dolor est.

Hero text: Lorem ipsum Dolor quis adipisicing in in minim laborum adipisicing eu irure voluptate quis dolore sit cillum minim in adipisicing adipisicing occaecat laborum.

Body text: Lorem ipsum Ullamco voluptate veniam consectetur mollit adipisicing labore cupidatat ad in dolore reprehenderit minim incididunt sunt exercitation in in labore ullamco enim aliqua dolore pariatur ullamco Ut velit adipisicing pariatur mollit tempor cupidatat magna Excepteur ut in sed nostrud deserunt do laborum occaecat laborum Ut dolor elit ad consectetur culpa sit Duis cupidatat Duis laboris voluptate est nulla dolore elit ullamco sed pariatur pariatur sed Duis reprehenderit voluptate officia non enim laboris sit sint deserunt ullamco in fugiat dolor ullamco esse id ut aliqua labore pariatur labore aliqua enim cillum aute nostrud nulla ea et in nostrud do in veniam commodo consectetur reprehenderit minim consectetur incididunt adipisicing deserunt pariatur non eiusmod velit ut quis aliquip qui occaecat in ex in adipisicing sunt.

Description text: Lorem ipsum Sed dolor magna cillum aliquip adipisicing occaecat nisi veniam deserunt est magna qui consequat Ut enim commodo laboris reprehenderit eu nostrud et tempor velit.

Small text: Lorem ipsum Dolore veniam in ex ut culpa sunt incididunt aliquip et eu consectetur culpa quis elit anim magna enim dolor dolor officia occaecat sed tempor irure fugiat ullamco et laboris reprehenderit amet tempor sit nulla ut proident ex exercitation veniam.

Icons

edit
calendar
download
close
check
arrowup
arrowright
arrowdown
arrowleft
chevronleft
chevronright
chevronup
chevrondown
search
message
bell
bellfill
caretdown
caretup
caretleft
caretright
doubleleft
doubleright
doubleup
doubledown
settings
navicon
user
flag
flagfill
euro
note
notefill
internalfile
externalfile
lightbulb
info
clock
closesmall
trash
link
spinner
print
upload
eye
lasso
tipos
facebook
google
twitter
linkedin
youtube
laptop
phone
city
copy
android
apple
barchart
piechart

Icons sizes

XL
L
M
S

Grid system

Main Breakpoints

L: 1030px +
M: 768px - 1029px
S: 320px - 767px

12 columns grid system

(L: 12cols, M: 6 cols, S: 4cols)

Basic layout

1

2

3

4

5

6

7

8

9

10

11

12

Complex layout

XL: 3/12L: 2/12M: 1/6S: 1/4XS: 1/2

XL: 3/12L: 4/12M: 2/6S: 2/4XS: 1/2

XL: 4/12L: 6/12M: 3/6S: 3/4XS: 2/2

XL: 6/12L: 8/12M: 4/6S: 4/4XS: 2/2

XL: 8/12L: 10/12M: 5/6S: 1/4XS: 1/2

XL: 10/12L: 12/12M: 6/6S: 2/4XS: 2/2

Offsets

L: Ofst: 1, W: 4M: Ofst: 0, W: 3S: Ofst: 0, W: 2

L: Ofst: 2, W: 4M: Ofst: 0, W: 3S: Ofst: 0, W: 2

Buttons

Default

Green

Orange

White

White 2

Clean

Button sizes

Button L/M/S

Medium

Button width sizes

Full width

Full width for S layout

Full width for XS layout

Button layouts

Button block

Button Button

Button line

Button Button

Buttons with icons

Floating icons

Download

Edit

Positioned icons

Back

Button groups inline

Button 1 Button 2 Button 3

Button 1 Button 2

Button 1 Button 2 Button 3

Button groups vertical

Button 1 Button 2 Button 3

Button bars

Button 1 Button 2

Button 3 Button 4 Button 5

Button dropdowns

Dropdowns

Split buttons

Form components

Inputs

Input L/M/S

Input states

Lorem ipsum In culpa eu velit nulla

Customized inputs

Textarea

Checkbox / Radio

Checkboxes

Checkbox

Checkbox disabled

Checkbox error Lorem ipsum In culpa eu velit nulla.

Radios

Radio

Radio disabled

Radio error Lorem ipsum In culpa eu velit nulla.

Checkbox group

Checkbox 1

Checkbox 2

Checkbox 3

Radio group

Radio 1

Radio 2

Radio 3

Select

Basic select

Lorem ipsum In culpa eu velit nulla.

Multiple select

Select with link

Switch

Fileinput

Vyberte súborZmeniť

Lorem ipsum In culpa eu velit nulla.

Form component groups

Postfix

=

Lorem ipsum In culpa eu velit nulla.

Prefix

>

Lorem ipsum In culpa eu velit nulla.

Special inputs

Dynamic input

Input with icons

Datepicker & Timepicker

Datepicker

Lorem ipsum In culpa eu velit nulla.

Timepicker

Lorem ipsum In culpa eu velit nulla.

Form error texts

Form label:

Lorem ipsum Dolor anim pariatur officia.

Form label:

Radio 1

Radio 2

Radio 3

Lorem ipsum In culpa eu velit nulla.

Form label:

Lorem ipsum Laboris reprehenderit anim dolor.

Form help texts

Form label:

Lorem ipsum Sint dolor in nostrud.

Form layouts

Vertical layout

Form label:

Horizontal layout

Form label:

Vertical block layout

Form label:

Horizontal block layout

Form label:

Multicolumn layout

Form label:

Inline layout

Form controls with fixed width

Size 1:

Size 2:

Size 3:

Size 4:

Size 5:

Size 6:

Size 7:

Size 8:

Size 9:

Size 10:

Size 11:

Size 12:

Modals

Popups

Show Pop-up Show Error Pop-up Show Warning Pop-up

Modals

Show Modal

Tooltips

On buttons

On disabled buttons

On text

Lorem ipsum Culpa cillum elit commodo culpa ad ea dolor consequat dolor enim cupidatat Excepteur et anim.

?Lorem ipsum Ad sint exercitation sunt.

On inputs

Buttons with tooltip icons work only with <a> tag (Firefox bug)

Boxes

Box simple

Lorem ipsum Ullamco non dolore nisi pariatur ut sunt do dolor Duis proident proident.

Box simple with footer

Lorem ipsum Ullamco non dolore nisi pariatur ut sunt do dolor Duis proident proident.

Box simple

Spoločnosť:

Lighting Beetle

Meno:

Michaela

Priezvisko:

Kočiová

Ulica a číslo domu:

SNP 73/6

Mesto:

Nová Dubnica

PSČ:

018 51

Štát:

Slovenský republika

Box headerless

Lorem ipsum Esse anim magna in mollit ut ullamco adipisicing laborum consequat qui ex pariatur cupidatat do.

Box with pagination

Lorem ipsum Pariatur incididunt in incididunt minim ea Ut id aliquip esse nisi aliquip veniam culpa laboris eu esse proident dolore.

Preloaders

In box

Box simple

In button

Pridať nový dokument Pridať nový dokument