Page containers:
For a better experience and test, close the sidebar.
Container
Full width container
Brand Files
Family
Headings
Manrope
Body
Lato
Headings:
Mobile
Large Title
Title 1
Title 2
Title 3
Headline
Callout
Subhead
Body
Caption
Desktop
Large Title
Title 1
Title 2
Title 3
Headline
Callout
Subhead
Body
CaptionTypography:
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.
Large Title
Title 1
Title 2
Title 3
Headline
Callout
Subhead Body caption Link Label Input Button L Button M Button SColors:
Brand Colors
Brand Darker
Brand Dark
Brand Default
Brand Light
Brand lighter
Brand Blue
Brand Blue light
Brand Blue lighter
Brand Blue off
Brand Sales default
System Colors / GRAY SCALE
Gray Black
Gray 950
Gray 900
Gray 800
Gray 700
Gray 600
Gray 500
Gray 400
Gray 300
Gray 200
Gray 100
Gray 50
White
System Colors / FEEDBACK NEGATIVE
FEEDBACK NEGATIVE Darker
FEEDBACK NEGATIVE Dark
FEEDBACK NEGATIVE Default
FEEDBACK NEGATIVE Light
FEEDBACK NEGATIVE Lighter
System Colors / FEEDBACK WARNING
FEEDBACK WARNING Darker
FEEDBACK WARNING Dark
FEEDBACK WARNING Default
FEEDBACK WARNING Light
FEEDBACK WARNING Lighter
System Colors / FEEDBACK POSITIVE
FEEDBACK POSITIVE Darker
FEEDBACK POSITIVE Dark
FEEDBACK POSITIVE Default
FEEDBACK POSITIVE Light
FEEDBACK POSITIVE Lighter
System Colors / FEEDBACK INFORMATIVE
FEEDBACK INFORMATIVE Darker
FEEDBACK INFORMATIVE Dark
FEEDBACK INFORMATIVE Default
FEEDBACK INFORMATIVE Light
FEEDBACK INFORMATIVE Lighter
Buttons:
variant: filled
Filled type auto
Filled type center
variant: outline
Outline type auto
Outline type center
variant: tonal
Tonal type auto
Tonal type center
Link
Icon Button
Tonal type auto
Tonal type center
Icon Button
Icons:
Brands
Variables
Forms:
Inputs:
Select:
Checkboxes:
Radio Buttons:
Switchers:
Textarea:
Number:
Checkboxes:
Radio Buttons:
Switchers:
Textarea:
Number:
Switchers:
Textarea:
Number:
Number:
Default image:
Image
Lazy loading image
Lazy loading image with sizes (width and height)
Responsive image:
Responsive image
The images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.
Responsive image with lazy loading
The images will change if you resize the window at these breakpoints: Mobile, Tablet and Desktop.
Variant Selector:
Quantity:
Quantity Default:
Quantity Button:
Quantity Select:
Swatches:
Default Slider:
Third-party library: Swiper (7.0.8)
Required parts:
Accordion:
Product Card:
Product Grid:
Product Price:
Static render:
Dynamic render:
Product Description:
Header:
Product Media:
Thumbnails Images:
Product Form:
Product with variants:
Model:
Product without variants:
Model:
Footer:
Footer:
Tab chip:
Video
Contenido del Video 1
Aquí iría el primer video o contenido multimedia.
Video
Contenido del Video 2
Aquí iría el segundo video o contenido multimedia.
Video
Contenido del Video 1
Aquí iría el primer video o contenido multimedia.
Video
Contenido del Video 2
Aquí iría el segundo video o contenido multimedia.
Video
Contenido del Video 1
Aquí iría el primer video o contenido multimedia.
Video
Contenido del Video 2
Aquí iría el segundo video o contenido multimedia.
Tab:
Video
Contenido del Video 1
Aquí iría el primer video o contenido multimedia.
Instagram
Contenido del Instagram 2
Aquí iría el segundo video o contenido multimedia.
Hashtag
Contenido del Hashtag 2
Aquí iría el segundo video o contenido multimedia.
Video
Contenido del Video 1
Aquí iría el primer video o contenido multimedia.
Instagram
Contenido del Instagram 2
Aquí iría el segundo video o contenido multimedia.
Hashtag
Contenido del Hashtag 2
Aquí iría el segundo video o contenido multimedia.
Video
Contenido del Video 1
Aquí iría el primer video o contenido multimedia.
Instagram
Contenido del Instagram 2
Aquí iría el segundo video o contenido multimedia.
Hashtag
Contenido del Hashtag 2
Aquí iría el segundo video o contenido multimedia.
Search bar:
Breadcrumbs:
Alert message:
Pagination:
You’ve viewed
12
of 1857
products
view more
Modal:
Sizes:
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Alignments:
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Combined Alignments:
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Modal with Close button
Popup Modal example!
Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequatur amet labore.
Banner Overlay:
Variant 1
Variant 2
Article Card:
Article Grid:
Assets Grid:
American Standard Assets
Article List:
Hero:
Collection Card:
All Collections
Collection Hero:
Liquid error (templates/page.style-guide line 2247): Error in tag 'section' - 'collection-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:
Collection
Sort By
Toolbar:
{"one"=>"{{ count }} result", "other"=>"{{ count }} results"}
Toolbar Inline:
Results
Toolbar with option:
Text with image:
examples