Page containers:

For a better experience and test, close the sidebar.

Container

Full width container

Brand Files

Grohe

Grohe Spa

Light Mode

Dark Mode

Typography

Univers Next Pro Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()_+`-=[]/\;’,{}|:”<>?.

Type Scale

Desktop

72px - Display

56px - Title 1

40px - Title 2

32px - Title 3

24px - Headline

20px - Subtitle

18px - Paragraph MD

16px - Paragraph (Base)

16px - Product Title (Base)

16px - Product Title SM

14px - Caption

12px - EYEBROW all caps

16px - Link

20px - Button lg

16px - Button MD

14px - Button SM

Mobile

48px - Display

40px - Title 1

32px - Title 2

24px - Title 3

20px - Headline

18px - Subtitle

16px - Paragraph MD

16px - Paragraph (Base)

16px - Product Title (Base)

16px - Product Title SM

14px - Caption

12px - EYEBROW all caps

16px - Link

18px - Button LG

16px - Button MD

14px - Button SM

Univers Next Pro Extended Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()_+`-=[]/\;’,{}|:”<>?.

Univers Next Pro Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()_+`-=[]/\;’,{}|:”<>?.

Type Scale

Desktop

72px - Display

56px - Title 1

40px - Title 2

32px - Title 3

24px - Headline

20px - Subtitle

18px - Paragraph MD

16px - Paragraph (Base)

16px - Link

16px - Product Title (Base)

16px - Product Title SM

14px - Caption

12px - EYEBROW all caps

16px - Button lg

14px - Button MD

12px - Button SM

Mobile

48px - Display

40px - Title 1

32px - Title 2

24px - Title 3

20px - Headline

18px - Subtitle

16px - Paragraph MD

16px - Paragraph (Base)

16px - Link

16px - Product Title (Base)

16px - Product Title SM

14px - Caption

12px - EYEBROW all caps

16px - Button LG

14px - Button MD

12px - Button SM

Headings:

Mobile

Large Title

Title 1

Title 2

Title 3

Headline

Callout

Subhead

Body

Caption LABEL Input

Desktop

Large Title

Title 1

Title 2

Title 3

Headline

Callout

Subhead

Body

Caption LABEL Input

Text blocks

Light mode

Must-Haves

Winter 2026

Stay warm with our outerwear and browse winter coats and puffer jackets and mid-season vests.

Shop Winter Classics

Must-Haves

Winter 2026

Stay warm with our outerwear and browse winter coats and puffer jackets and mid-season vests.

Shop Winter Classics

Dark mode

Must-Haves

Winter 2026

Stay warm with our outerwear and browse winter coats and puffer jackets and mid-season vests.

Shop Winter Classics

Must-Haves

Winter 2026

Stay warm with our outerwear and browse winter coats and puffer jackets and mid-season vests.

Shop Winter Classics

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.

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 S

Colors:

Base Styles & Variables

Brand

Grohe Blue

darkest darker dark default light 90% lighter 80% lightest 75%

Function Blue

default light 80% lighter 60% lightest 40%

Sale Red

default

Base Styles & Variables

Brand

Grohe Spa Blue

darkest default light lighter lightest

Grohe Spa Beige

default light lighter lightest

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

Label Label Label Label Label Label

Icon Button

Icons:

Brands

Variables

Forms:

Inputs:

LABEL DELETE

LABEL

INPUT DISABLED

INPUT SUCCESS

INPUT WARNING

INPUT ERROR

Error Message

INPUT ICON

INPUT ICON SUCCESS

INPUT ICON ERROR

INPUT ASSISTIVE TEXT

Helper text goes here

Select:

Checkboxes:

Radio Buttons:

Switchers:

Textarea:

Number:

Drop Select

Quantity

Just 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)

Carousel Pagination:

Line

test

test1

test2

test3

test4

Dot

test

test1

test2

test3

test4

Counter

test

test1

test2

test3

test4

Required parts:

Accordion:

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Accordion icon change:

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Fashion is a very stressful place to work because of the demands of doing the shows - no one expects a writer to produce two books a year on the dot - but it's also a very toxic place to work.

Made in USA
Relaxed fit, pullover style with just enough stretch
Classic crew neckline
Ribbed neckline and cuffs
Straight, ribbed hemline

Product Card:

Static render:

Liquid error (snippets/product-card line 122): product form must be given a product

Product Grid:

Liquid error (snippets/product-card line 122): product form must be given a product

Product Price:

Static render:

Dynamic render:

Product Description:

Header:

Product Media:

Thumbnails Images:

Product Form:

Product with variants:

Model:

Liquid error (snippets/product-form line 32): product form must be given a product

Product without variants:

Model:

Liquid error (snippets/product-form line 32): product form must be given a product

Liquid error (snippets/product-card line 122): product form must be given a product

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:

Professionals

Pagination:

You’ve viewed 15 of 1857 products view more