Fonts

Circular Std

Regular 400 / Bold 700

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

You can use classes as well: .h1, .h2, .h3, .h4, .h5 and .h6.

Paragraphs

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

Icons





Buttons

Primary

Button link


Secondary

Secondary button link


Ghost

Button ghost link


Ghost secondary

Button ghost secondary link


Link button

Button link


Button with icon




Extra button styles

Full button

Forms








Image

Lazyload enabled

Image


Lazyload enabled with image sizes (width and height)

Image


Lazyload disabled

Image

Responsive image with lazy loading and aspect ratio

Lazyload enabled

Test image
Test image
Test image

The images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.


Lazyload disabled

Test image
Test image
Test image

The images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.

Color Swatches

Quantity Selector

Product Card


-

Product grid


-
-
-
-
-
-
-
-

Search bar

Variant selector

Product single

Liquid error: comparison of String with 0 failed
Liquid error: product form must be given a product

Accordion

Global Navigation



Breadcrumbs



Default Carousel

Image
Image
Image
Image
Image
Image


Image
Image
Image
Image
Image
Image


Default carousel with products

-
-
-
-
-
-
-
-


Default carousel with heading



Banner Overlay - Top Left

Banner Overlay - Small Style



Banner Overlay - Mobile disable overlay style



Pagination



Alert message



Image grid



Heading with Heading Description

@thisisatest

This is a test description!



Class to hide elements

Classes available: hidden__mobile , hidden__tablet , hidden__desktop.

Reize the screen to see the other elements.

test hidden__tablet hidden__desktop
test hidden__mobile hidden__desktop
test hidden__mobile hidden__tablet


Full width container

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



Section Banner Slider

Liquid error: Error in tag 'section' - 'banner-slider' is not a valid section type

Standalone add to cart with loading



Add to cart form

Liquid error: product form must be given a product

Timer component



Hot Trends Section



Event Detail

Image



Products Slider



Price Table Category

Price Table



Price Table



Image gallery slider



Modal

Required properties: data-modal-open on the btn open, data-modal-name on the modal container, the two with the same attribute, data-modal-close on the btn close, and data-modal on the modal container, the two without attribute defined

Sizes class:
modal__content--small - max-width: 20%,
modal__content--default - max-width: 40%,
modal__content--large - max-width: 60%,
modal__content--full-screen - width and height: 100%


Click on data-modal-open to open the modal with data-modal with same attribute and click on data-modal-close or outside the modal container to close



Coming soon

Don't Miss Out! Sign-up for event notifications :

Thanks for signing up!



Instagram

@260la

Anticipated Sales. Beloved Brands. Every Week! Follow us

Tooltip

Available alignments: left center right

Content you can add: any html code, as a form an image buttons a product

When click on the link the content will appear.

Connect with us on Social

Social links:



Collection Banner

collection_title
collection_title
Shop Now


Popup

The popup is floating around the page. It is located in the lower right corner of the screen.



Collection Filters

Filter & Sorting


Quick View



Placeholder product card



Medium Zoom

Image


Progress Bar



Shopping Bag ()