Logo:
PNG:
Page containers:
For a better experience and test, close the sidebar.
Container
Full width container
Fonts:
Unica77 - Regular 400
Unica77 - Semibold 600
Unica77 - Extra Bold 800
Monument Grotesk - Regular 400
Monument Grotesk - Semibold 600
Monument Grotesk - Extra Bold 800
Headings:
Heading 1
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.
Heading 2
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.
Heading 3
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.
Heading 4
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.
Heading 5
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.
Heading 6
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.
Typography:
Body text:
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.
Body text with links:
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.
Colors:
Black #272727
White #FFFFFF
Scale:
100 #6B6B72
300 #434348
Black #272727
600 #111111
White #FFFFFF
50 #F8F8F8
150 #D8D8DB
300 #A9A9AE
Border:
Border #ECECEC
Feedback:
Error #ee2663
Warning #FF9500
Success #6fa742
Error #ee2663
Warning #FF9500
Success #6fa742
Buttons:
Primary:
Pressed
Focus
Secondary:
Pressed
Focus
Ghost:
Pressed
Focus
Button with icon:
Focus
Focus
Focus
Focus
Link:
Pressed Focus
Ghost:
Pressed
Focus
Button with icon:
Focus
Focus
Focus
Focus
Link:
Focus
Focus
Focus
Focus
Link:
Icons:
Forms:
Responsive image:
Responsive image
Liquid error (templates/page.style-guide line 429): Could not find asset snippets/responsive-image.liquidThe images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.
Responsive image with lazy loading
Liquid error (templates/page.style-guide line 441): Could not find asset snippets/responsive-image.liquidThe images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.
Variant Selector:
Swatches:
Quantity Selector:
Normal render
Liquid error (templates/page.style-guide line 481): Could not find asset snippets/quantity-selector.liquid
Dynamic render
Accordion:
Product Gallery:
Product Card:
Product Label:
Out of Stock
Product Grid:
Add to Cart:
Product Price:
Product Description:
Liquid error (templates/page.style-guide line 699): Could not find asset snippets/component-product-description.liquid
Header:
Product Media:
Liquid error (templates/page.style-guide line 719): Could not find asset snippets/component-product-media.liquid
Footer:
Search Bar:
Liquid error (templates/page.style-guide line 739): Could not find asset snippets/search-bar.liquid
Breadcrumbs:
Alert message:
Liquid error (templates/page.style-guide line 758): Error in tag 'section' - 'alert-message' is not a valid section type
Pagination:
Modal:
Properties:
modal_btn_class - button class (not obligatory) modal_name - modal name modal_button - open button text modal_size - modal size modal_content - modal content Sizes:
small - max-width: 25%, default - max-width: 40%, large - max-width: 60%, full-screen - width and height: 100% Examples:
Liquid error (templates/page.style-guide line 868): Could not find asset snippets/modal.liquid Liquid error (templates/page.style-guide line 880): Could not find asset snippets/modal.liquid Liquid error (templates/page.style-guide line 888): Could not find asset snippets/modal.liquid Liquid error (templates/page.style-guide line 896): Could not find asset snippets/modal.liquid
Tooltip:
Tooltip text here...
Tooltip text here... you can also break in two lines!.
Tooltip text here...
Tabs:
Description
This backpack's got your back. Made with REC Bedford nylon and Italian leather detailing, metal zippers, thin straps, snap and zipper closures, and a front pocket detail.
Specifications - The Modular Closet Double Hanging section is the perfect closet unit for organizing your suits, shirts, pants, or skirts. The module is designed to give you two levels of hanging space, each large enough to accommodate up to 40" long garments.
Minicart:
Cart table:
Cart is empty
Cart Summary:
Cart is empty
Default Carousel:
Default carousel with products:
Default carousel with heading:
Heading example
Banner Overlay:
Liquid error (templates/page.style-guide line 1192): Error in tag 'section' - 'banner-overlay' is not a valid section type
Article Card:
Article Grid:
Article Structure:
Banner Hero:
Liquid error (templates/page.style-guide line 1264): Error in tag 'section' - 'banner-hero' is not a valid section type
Class to hide elements:
Classes available:
hidden - general
sm:hidden - @media (min-width: 640px)
md:hidden - @media (min-width: 768px)
lg:hidden - @media (min-width: 1024px)
xl:hidden - @media (min-width: 1280px
2xl:hidden - @media (min-width: 1536px)
Resize the screen to see the other elements.
tablet:hidden desktop:hidden
hidden md:block lg:hidden
hidden lg:block xl:hidden
hidden xl:block 2xl:hidden
hidden 2xl:block
Filters:
Sort By:
Login Form:
Liquid error (templates/page.style-guide line 1388): Error in tag 'section' - 'login' is not a valid section type
Register Form:
Liquid error (templates/page.style-guide line 1397): Error in tag 'section' - 'register' is not a valid section type
Reset Password:
Toolbar:
Liquid error (templates/page.style-guide line 1415): Could not find asset snippets/toolbar.liquid