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 example Button label Button link Button disabled Button with icon

Secondary

Secondary button Secondary button link Secondary button disabled Button with icon

Ghost

Button ghost label Button ghost link Button ghost disabled Button with icon

Ghost secondary

Button ghost secondary label Button ghost secondary link Button ghost secondary disabled Button with icon

Link button

Button example Button link Menu

Button with icon

Button with icon Button icon after

Extra button styles

Full button

Forms

Label example Label example Select an option Select an option Select an option Select example Button Option 1 Option 2 Option 3


This is an example
This is an example
This is an example

Label example

Image

Responsive image with lazy loading and aspect ratio

Lazyload enabled

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

Lazyload disabled

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

Accordion

Global Navigation

Breadcrumbs

Default Carousel

Default carousel with products

-

Add to Bag

-

Add to Bag

-

Add to Bag

-

Add to Bag

-

Add to Bag

-

Add to Bag

-

Add to Bag

-

Add to Bag

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

Class to hide elements

Classes available: hidden__mobile , hidden__tablet , hidden__desktop.

Reize the screen to see the other elements.

Full width container

Section Banner Slider

Liquid error (templates/page.style-guide line 746): Error in tag 'section' - 'banner-slider' is not a valid section type

Standalone add to cart with loading

Add to Bag

Add to cart form

Liquid error (templates/page.style-guide line 762): product form must be given a product

Timer component

Hot Trends Section

Event Detail

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

Thanks for signing up!

Notify Me

Inside the Sale + Price Table

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

Open modal with image Open modal small Open modal default Open modal large Open modal full-screen

Coming soon

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

Thanks for signing up!

Notify Me

Instagram

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.

Collection Banner

Popup

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

Collection Filters

Filter & Sorting

Clear All

0 Filters Clear All

Apply Filters

open filters

Quick View

Placeholder product card

Medium Zoom

Progress Bar