×

Proizvodi

Typography

Body text

Lorem ipsum (regular link) dolor sit amet, consectetur adipisicing 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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.text--small

Lorem ipsum (regular link) dolor sit amet, consectetur adipisicing 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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headings

H1. tag with trailing text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H2. tag with trailing text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H3. tag with trailing text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H4. tag with trailing text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H5. tag with trailing text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H6. tag with trailing text

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Abbreviations

attr

HTML

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lists

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Inline inverted

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Breakout background

Add .breakout-bg class to break out of the .container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum turpis at ante viverra egestas. Suspendisse potenti. Quisque non viverra dui, vel laoreet velit. Cras justo nibh, vulputate nec bibendum sit amet, tempor eu arcu.

Sed pharetra lobortis placerat. Phasellus fermentum suscipit nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim bibendum nunc, vitae mollis mauris aliquet a

Maecenas venenatis mi sed tincidunt lacinia. Nunc mollis, mi in aliquam egestas, ante justo iaculis felis, in imperdiet enim sem in lectus. Cras nec volutpat libero. Duis ac dolor dui. Aliquam venenatis tempus odio, at condimentum massa scelerisque quis. Mauris id libero in velit hendrerit cursus. Nunc volutpat consectetur consectetur. Mauris eget sapien aliquet, luctus quam eu, gravida purus.

Tables

Add class modifier .table--responsive to get responsive table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Alerts

Buttons

Link

Button variants

.btn--primary
Link
.btn--secondary
Link
.btn--link
Link
.btn--lg

Circle buttons

.btn--circle
.btn--circle-lg

Button Disabled

.disabled

Button Loading

.loading

Block level button

.btn--block

Button with icon



Large buttons with icon


Circle buttons with icon


Large circle buttons with icon


Block buttons with icon


.btn--icon-left

Collapse

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Forms

Form groups

Form grid

Radio buttons and checkbox



Inline checkbox


Inline radio

Readonly

Readonly plain text

Form validation

Looks good!

Please provide a valid state.

Cards

Success

Some quick example text to build on the card title and make up the bulk of the card's content.

99.99 Kn
Success

Some quick example text to build on the card title and make up the bulk of the card's content.

99.99 Kn
Success

Some quick example text to build on the card title and make up the bulk of the card's content.

99.99 Kn

Banners

Boxes

placeholder image

Box title

by Ivo Ivic 1. siječnja 2001.

Aenean vitae justo sodales lorem tristique laoreet at vel velit. Sed a orci vel sem vehicula molestie non id felis. In hendrerit pellentesque ex a tincidunt. Sed et eros aliquam, interdum nibh at, tincidunt risus. Etiam elit turpis, porta quis mi sed, vulputate pulvinar diam. Donec ipsum felis, rutrum et arcu id, lacinia dapibus magna. Sed elementum sollicitudin lectus ac blandit.

placeholder image

Box title

by Ivo Ivic 1. siječnja 2001.

Aenean vitae justo sodales lorem tristique laoreet at vel velit. Sed a orci vel sem vehicula molestie non id felis. In hendrerit pellentesque ex a tincidunt. Sed et eros aliquam, interdum nibh at, tincidunt risus. Etiam elit turpis, porta quis mi sed, vulputate pulvinar diam. Donec ipsum felis, rutrum et arcu id, lacinia dapibus magna. Sed elementum sollicitudin lectus ac blandit.

placeholder image

Box title

by Ivo Ivic 1. siječnja 2001.

Aenean vitae justo sodales lorem tristique laoreet at vel velit. Sed a orci vel sem vehicula molestie non id felis. In hendrerit pellentesque ex a tincidunt. Sed et eros aliquam, interdum nibh at, tincidunt risus. Etiam elit turpis, porta quis mi sed, vulputate pulvinar diam. Donec ipsum felis, rutrum et arcu id, lacinia dapibus magna. Sed elementum sollicitudin lectus ac blandit.

Box with header

Box header

placeholder image Box title

Box header

placeholder image Box title

Box with no transition

Box header

Box header

Badges

badge--primary
1 2 3 99
badge--secondary
1 2 3 99

Slider

Our sliders are built with Swiper.

Slider with arrows

Slider with scrollbar

Slider with max width

We are using slider modifier class .slider--alpha to set max width of slider

Slider with arrows up

We are using slider modifier class .slider--beta to change position slider arrows

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

.nav--inv .flex-column .font-weight-bold .text-uppercase .justify-content-center .justify-content-end .justify-content-between

Navs icons

Accolades

Success
Danger
Info

Tabs

Case studies

Duis finibus rhoncus dui vitae tempus. Cras sed risus turpis. Etiam hendrerit suscipit dapibus. Sed interdum quam lorem, vel vulputate velit gravida sit amet. Suspendisse bibendum, sem vitae faucibus sodales, turpis tortor facilisis risus, quis sodales tellus leo a mauris. Nam vitae nunc lacus. Sed eget dapibus libero. Nam quis vulputate purus. Quisque gravida magna in diam semper, quis convallis ex pharetra. Proin tempus faucibus enim, vel fringilla magna lacinia vitae.

Blog posts

Prosciutto pork loin strip steak beef ribs ham pork belly tail jerky tenderloin drumstick. Bacon leberkas hamburger, chuck ball tip filet mignon ham hock pork loin strip steak shank. Short loin landjaeger beef ribs rump shank, strip steak t-bone pancetta shankle. Pork loin spare ribs leberkas capicola beef ribs meatloaf meatball tail strip steak salami alcatra turkey jerky ham hock.

About

Picanha turducken kielbasa ea ut in jowl chicken velit irure sint minim exercitation prosciutto. Nisi consectetur pancetta in ground round ball tip frankfurter in ad ea cupim tongue bresaola. Magna buffalo aliquip irure ham hock picanha ad dolore swine veniam capicola pastrami landjaeger nulla. Bresaola ea buffalo aliqua ham hock pastrami fatback. Minim tempor turducken cupim occaecat, leberkas et in biltong venison.

Pagination

Page pagination


Post pagination

Panels

Panel title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue odio at semper gravida. Sed finibus non massa eu faucibus. Aenean at massa tincidunt, convallis leo sed, blandit ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu placerat urna, in euismod sem. Maecenas vulputate purus et est interdum, a sollicitudin turpis lobortis. Morbi interdum ornare venenatis. Donec id accumsan felis.
Panel second title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue odio at semper gravida. Sed finibus non massa eu faucibus. Aenean at massa tincidunt, convallis leo sed, blandit ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu placerat urna, in euismod sem. Maecenas vulputate purus et est interdum, a sollicitudin turpis lobortis. Morbi interdum ornare venenatis. Donec id accumsan felis.