Patterns

Accordion

Accordion item 1

Cake danish gummi bears cookie. Biscuit pastry cake sugar plum. Danish lollipop biscuit gingerbread sesame snaps lollipop pudding chocolate cake pastry. Dragée sweet roll pudding. Soufflé candy pie cheesecake candy tiramisu jelly-o brownie oat cake. Pastry liquorice cake chocolate cupcake danish ice cream. Biscuit bear claw chocolate carrot cake. Sesame snaps gummi bears macaroon lollipop gummies macaroon marzipan. Croissant chupa chups sweet roll topping gummies biscuit. Sweet roll icing bonbon jelly beans macaroon sesame snaps gingerbread dragée. Candy pastry cake dragée chocolate. Muffin halvah powder biscuit. Tootsie roll jelly cupcake liquorice sesame snaps dragée cupcake oat cake powder. Tiramisu candy cake donut cheesecake pastry pie donut.

Accordion item 2

Cake danish gummi bears cookie. Biscuit pastry cake sugar plum. Danish lollipop biscuit gingerbread sesame snaps lollipop pudding chocolate cake pastry. Dragée sweet roll pudding. Soufflé candy pie cheesecake candy tiramisu jelly-o brownie oat cake. Pastry liquorice cake chocolate cupcake danish ice cream. Biscuit bear claw chocolate carrot cake. Sesame snaps gummi bears macaroon lollipop gummies macaroon marzipan. Croissant chupa chups sweet roll topping gummies biscuit. Sweet roll icing bonbon jelly beans macaroon sesame snaps gingerbread dragée. Candy pastry cake dragée chocolate. Muffin halvah powder biscuit. Tootsie roll jelly cupcake liquorice sesame snaps dragée cupcake oat cake powder. Tiramisu candy cake donut cheesecake pastry pie donut.

Accordion item 3

Cake danish gummi bears cookie. Biscuit pastry cake sugar plum. Danish lollipop biscuit gingerbread sesame snaps lollipop pudding chocolate cake pastry. Dragée sweet roll pudding. Soufflé candy pie cheesecake candy tiramisu jelly-o brownie oat cake. Pastry liquorice cake chocolate cupcake danish ice cream. Biscuit bear claw chocolate carrot cake. Sesame snaps gummi bears macaroon lollipop gummies macaroon marzipan. Croissant chupa chups sweet roll topping gummies biscuit. Sweet roll icing bonbon jelly beans macaroon sesame snaps gingerbread dragée. Candy pastry cake dragée chocolate. Muffin halvah powder biscuit. Tootsie roll jelly cupcake liquorice sesame snaps dragée cupcake oat cake powder. Tiramisu candy cake donut cheesecake pastry pie donut.

Modals

Default

Sizes

Viewport height

Lightbox

Offcanvas

Default

Displayed at medium MQ

Range slider

Multi thumb slider
With decimals
Negative minimum
With unit

Base

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Toggle script
var options = {
    'demo-1': {
    	  items: 1,
    	  responsive: {
      	    576: {
      	        items: 2,
      	        gutter: baseFontSize * getComputedStyle(html).getPropertyValue('--sp-unitless')
      	    },
      	    1200: {
      	        items: 3
      	    },
	            1600: {
	                items: 4
	            }
      	}
    },
    'demo-2': {
        ...
    },
    'demo-3': {
        ...
    }
};

Alternative controls

Toggle script
var options = {
    'demo-1': {
        ...
    },
    'demo-2': {
        items: 1
    },
    'demo-3': {
        ...
    }
};

With edgePadding & no controls

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Toggle script
var options = {
    'demo-1': {
        ...
    },
    'demo-2': {
        ...
    },
    'demo-3': {
        items: 1,
        gutter: baseFontSize,
        edgePadding: baseFontSize * 3,
        responsive: {
            576: {
                items: 2
            },
            1200: {
                items: 3
            }
        }
    }
};

With images as thumbnails

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos.

Tabs

Notes :

  • If there is not hx in the content, add data-hx="hx" to .js-tabs.

Tab title #1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos. Autem enim beatae eos culpa quia labore quo iusto. Doloremque, optio necessitatibus possimus praesentium?

Tab title #2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos. Autem enim beatae eos culpa quia labore quo iusto. Doloremque, optio necessitatibus possimus praesentium?

Tab title #3

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus error, dicta voluptas numquam, vero accusantium dignissimos. Autem enim beatae eos culpa quia labore quo iusto. Doloremque, optio necessitatibus possimus praesentium?

Tooltips

Default (top)

Input
Button

Others directions

Bottom
Left
Right

Responsive

Right, then top at medium MQ
Top, then bottom at medium MQ