Zum Inhalt springen Zum Footer springen Sitemap anzeigen
Contatti
Contattaci
Colors Backdrops Shadows Border Typography Bodytext Icons Flags Grid Spacing Buttons Text link Slider controls Control icons Media Modals Tooltips Header Group Simple links Tags Link Chips Breadcrumbs Pagination Form Accordion Scroll Mask

Colors

Primary

primary-100
primary-100
primary-300
primary-300
primary-500
primary-500
primary-700
primary-700

Secondary

secondary-500
secondary-500

Neutral

neutral-50
neutral-50
neutral-100
neutral-100
neutral-200
neutral-200
neutral-300
neutral-300
neutral-500
neutral-500
neutral-700
neutral-700
neutral-900
neutral-900

UI

ui-white
ui-white
ui-black
ui-black
ui-error
ui-error
ui-error-bg
ui-error-bg
ui-warning
ui-warning
ui-warning-bg
ui-warning-bg
ui-success
ui-success
ui-success-bg
ui-success-bg

Gradients

ui-gradient-1
ui-gradient-1
media-gradient-1
media-gradient-1
media-gradient-2
media-gradient-2
primary-gradient-1
primary-gradient-1
primary-gradient-2
primary-gradient-2

Theme default

accent
accent
text
text
text-inverted
text-inverted
background
background
line
line
focus
focus
backdrop
backdrop
link
link
link-hover
link-hover

Theme dark

accent
accent
text
text
text-inverted
text-inverted
background
background
line
line
focus
focus
backdrop
backdrop
link
link
link-hover
link-hover

Theme brand

accent
accent
text
text
text-inverted
text-inverted
background
background
line
line
focus
focus
backdrop
backdrop
link
link
link-hover
link-hover

Backdrops

default
dark
media-gradient-1
media-gradient-2
primary-gradient-1
primary-gradient-2
default
dark
media-gradient-1
media-gradient-2
primary-gradient-1
primary-gradient-2
default
dark
media-gradient-1
media-gradient-2
primary-gradient-1
primary-gradient-2

Shadows

Borders

Typography

Display .fst--display
CCL
Hero Display .fst--hero
Create nice
systems.
Headline 1 .fst--h1
Create nice and
flexible systems.
Headline 2 .fst--h2
Create nice and flexible
design systems.
Headline 3 .fst--h3
Create nice and flexible design
systems for selling.
Headline 4 .fst--h4
Create nice and flexible design systems for
selling anything you want.
Headline 5 .fst--h5
Create nice and flexible design systems for selling
anything you want.
Bodytext Large .fst--body-l
Create nice and flexible design systems for selling anything you want. Our products are flexible, sustainably and simple to handle. Discover our highlights here and now.
Bodytext .fst--body
Create nice and flexible design systems for selling anything you want. Our products are flexible, sustainably and simple to handle. Discover our highlights here and now.
Bodytext Small .fst--body-s
Create nice and flexible design systems for selling anything you want. Our products are flexible, sustainably and simple to handle. Discover our highlights here and now.
Caption .caption
Start shopping

Bodytext

To apply these styles, set a class bodytext to the surrounding container.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

Lorem Link starts here
but has a break ipsum dolor.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum Text Link viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
  • Lorem ipsum dolor sit amet
    consectetur adipiscing elit eleifend

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

  1. Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend
  2. Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
  3. Lorem ipsum dolor sit amet
    consectetur adipiscing elit eleifend

Tellus hendrerit conubia donec etiam volutpat habitasse nec aptent fames eu dictumst, nunc vitae velit dictum libero eleifend mauris cum risus fusce lacinia urna, mi convallis non egestas euismod netus consequat aenean magnis parturient. Mollis ultrices commodo cubilia libero magna phasellus vulputate at posuere porttitor per faucibus orci diam semper fames, accumsan eleifend aliquet integer taciti fringilla ultricies.

To apply these styles, set a class bodytext to the surrounding container.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

Lorem Link starts here
but has a break ipsum dolor.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum Text Link viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
  • Lorem ipsum dolor sit amet
    consectetur adipiscing elit eleifend

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

  1. Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend
  2. Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
  3. Lorem ipsum dolor sit amet
    consectetur adipiscing elit eleifend

Tellus hendrerit conubia donec etiam volutpat habitasse nec aptent fames eu dictumst, nunc vitae velit dictum libero eleifend mauris cum risus fusce lacinia urna, mi convallis non egestas euismod netus consequat aenean magnis parturient. Mollis ultrices commodo cubilia libero magna phasellus vulputate at posuere porttitor per faucibus orci diam semper fames, accumsan eleifend aliquet integer taciti fringilla ultricies.

To apply these styles, set a class bodytext to the surrounding container.

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

Lorem Link starts here
but has a break ipsum dolor.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend.

  • Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum Text Link viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
  • Lorem ipsum dolor sit amet
    consectetur adipiscing elit eleifend

Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.

  1. Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend
  2. Lorem ipsum dolor sit amet consectetur adipiscing elit eleifend, ultricies tempus rhoncus bibendum viverra magnis aptent ligula, platea donec aliquet sociis maecenas enim posuere.
  3. Lorem ipsum dolor sit amet
    consectetur adipiscing elit eleifend

Tellus hendrerit conubia donec etiam volutpat habitasse nec aptent fames eu dictumst, nunc vitae velit dictum libero eleifend mauris cum risus fusce lacinia urna, mi convallis non egestas euismod netus consequat aenean magnis parturient. Mollis ultrices commodo cubilia libero magna phasellus vulputate at posuere porttitor per faucibus orci diam semper fames, accumsan eleifend aliquet integer taciti fringilla ultricies.

Icons

global

socials

illustration

Flags

To convert ISO-Codes to country flag emojis, apply the twig helper function like follows: country_flag(ISO-CODE).

🇦🇹 🇩🇪 🇮🇹 🇪🇸 🇳🇱

Grid

Bootstrap grid .container

1
2
3
4
5
6
7
8
9
10
11
12

Grid layout .grid-layout

1
2
3
4
5
6
7
8
9
10
11
12

Bootstrap grid fluid .container-fluid

1
2
3
4
5
6
7
8
9
10
11
12

Grid layout fluid .grid-layout.grid-layout--fluid

1
2
3
4
5
6
7
8
9
10
11
12

Spacing (works only in dev mode)

In production build unused classes get stripped - so this only works on local development settings.

Absolute spacings

025 .pl-025
05 .pl-05
1 .pl-1
1-5 .pl-1-5
2 .pl-2
3 .pl-3
4 .pl-4
5 .pl-5
6 .pl-6
7 .pl-7
8 .pl-8
9 .pl-9
10 .pl-10

Content element spacing

Spacing small
Spacing default
Spacing large

Buttons

Buttons in themes

Buttons as <a>

This is a link This is a link This is a link
This is a link This is a link This is a link
This is a link This is a link This is a link

Buttons as <button>

Button sizes

Buttons Block

This is a link This is a link This is a link
This is a link This is a link This is a link
This is a link This is a link This is a link

Buttons icon only

Buttons as <a>

This is a link This is a link This is a link
This is a link This is a link This is a link
This is a link This is a link This is a link

Buttons as <button>

Button sizes

Buttons Block

This is a link This is a link This is a link
This is a link This is a link This is a link
This is a link This is a link This is a link

Buttons icon only

Buttons as <a>

This is a link This is a link This is a link
This is a link This is a link This is a link
This is a link This is a link This is a link

Buttons as <button>

Button sizes

Buttons Block

This is a link This is a link This is a link
This is a link This is a link This is a link
This is a link This is a link This is a link

Buttons icon only

Text link

Text link as <a>

This is a link
This is a link
This is a link
This is a link

Text link as <button>

Icon only

Text link as <a>

This is a link
This is a link
This is a link
This is a link

Text link as <button>

Icon only

Text link as <a>

This is a link
This is a link
This is a link
This is a link

Text link as <button>

Icon only

Slider controls

Small

Medium

Large

Disabled

Other icons

Small

Medium

Large

Disabled

Other icons

Small

Medium

Large

Disabled

Other icons

Control icons

Default as <button>

Disabled as <button>

Default as <button>

Disabled as <button>

Default as <button>

Disabled as <button>

Media

Image

Aspect ratio: 4:5
Aspect ratio: 1:1
Aspect ratio: 3:2
Aspect ratio: 5:3
Aspect ratio: 16:9

Video autoplay

this is my transcription
hello
Aspect ratio: 4:5
this is my transcription
hello
Aspect ratio: 1:1
this is my transcription
hello
Aspect ratio: 3:2
this is my transcription
hello
Aspect ratio: 5:3
this is my transcription
hello
Aspect ratio: 16:9

Video player

this is my transcription
hello
Aspect ratio: 4:5
this is my transcription
hello
Aspect ratio: 1:1
this is my transcription
hello
Aspect ratio: 3:2
this is my transcription
hello
Aspect ratio: 5:3
this is my transcription
hello
Aspect ratio: 16:9

Modals

This modal comes first in the dom

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Modals can be triggered in multiple ways:

  1. Use a button with data-modal="ID"
  2. Use an anchor link with href="#modal-ID"
  3. Programmatically with JavaScript: App.ModalManager.openModal(MODAL_ID, TRIGGER_ELEMENT)

Most of the functionality of the modals comes out of the box. Add sugar in the modal.ts.
The modals are being controlled by the ModalManager class. This hold the information of the active modals and where they were opened from.

Open modal number 3 with a link

This is a headline

This is some random content

This is some random content of the second modal

Sidebar modal

Some additional Content

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Some additional Content

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Lorem ipsum dolor sit amet consectetur adipiscing elit, aliquet eget ultrices turpis quam donec pellentesque, mus nec per primis etiam laoreet. Hendrerit metus curabitur molestie ut justo odio eu congue orci euismod, augue litora a id mollis dictum quisque dui iaculis, sapien sociosqu himenaeos auctor quis bibendum tellus posuere arcu.

Sidebar modal

This modal can't be closed by clicking the backdrop and it doesn't write to history

Tooltips

Default

?

Different Symbol

i

Simple Html Content

?

Complex Html Content

?

Default

?

Different Symbol

i

Simple Html Content

?

Complex Html Content

?

Default

?

Different Symbol

i

Simple Html Content

?

Complex Html Content

?

Header Group

Caption

My Headline (h1)

Caption

My Headline (h2)

Caption

My Headline (h3)

Caption

My Headline (h4)

Caption

My Headline (h5)

Simple links

Basic usage with link and custom content:
This is a random content
Fallback without link:
Altro

Tags

Default

Without icon With icon

Small

Without icon With icon

Background

Without icon With icon

Default

Without icon With icon

Small

Without icon With icon

Background

Without icon With icon

Default

Without icon With icon

Small

Without icon With icon

Background

Without icon With icon

Link Chips

With Image

This is a link

Without Image

This is a link

With Image

This is a link

Without Image

This is a link

With Image

This is a link

Without Image

This is a link

Breadcrumbs

Default

Home  / 

Don't show start

Disabled

Home  / 

Default

Home  / 

Don't show start

Disabled

Home  / 

Default

Home  / 

Don't show start

Disabled

Home  / 

Pagination

Form

Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
What do you like?
What do you like?
What do you like?
Questo valore non dovrebbe essere vuoto.
Are you happy with the looks of this form?
Are you happy with the looks of this form?
Are you happy with the looks of this form?
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
Questo valore non dovrebbe essere vuoto.
What do you like?
What do you like?
What do you like?
Questo valore non dovrebbe essere vuoto.
Are you happy with the looks of this form?
Are you happy with the looks of this form?
Are you happy with the looks of this form?
Questo valore non dovrebbe essere vuoto.

Accordion

What is the Pimcore Boilerplate?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Why are we doing this?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

What does 42 mean?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Scroll Mask

Shadow mode

Scroll right -->

Mask mode

Scroll right -->
Contatti
YouTube è disattivato
Abbiamo bisogno del tuo consenso per utilizzare i video di YouTube. Per maggiori informazioni, consulta la nostra Informativa sulla privacy.
Vimeo è disattivato
Abbiamo bisogno del tuo consenso per utilizzare i video Vimeo. Per maggiori informazioni, consulta la nostra Informativa sulla privacy.
Google Maps è disattivato
Abbiamo bisogno del tuo consenso per utilizzare Google Maps. Per maggiori informazioni, consulta la nostra Informativa sulla privacy.

Ricerca