CCL Label – Styleguide

Skip to content Skip to footer Show sitemap

Contact

Colors

Primary

primary-100

primary-300

primary-500

primary-700

Secondary

secondary-500

Neutral

neutral-50

neutral-100

neutral-200

neutral-300

neutral-500

neutral-700

neutral-900

UI

ui-white

ui-black

ui-error

ui-error-bg

ui-warning

ui-warning-bg

ui-success

ui-success-bg

Gradients

ui-gradient-1

media-gradient-1

media-gradient-2

primary-gradient-1

primary-gradient-2

Theme default

accent

text

text-inverted

background

line

focus

backdrop

link

link-hover

Theme dark

accent

text

text-inverted

background

line

focus

backdrop

link

link-hover

Theme brand

accent

text

text-inverted

background

line

focus

backdrop

link

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.

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.
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.

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.
Lorem ipsum dolor sit amet
consectetur adipiscing elit eleifend

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.

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.
Lorem ipsum dolor sit amet
consectetur adipiscing elit eleifend

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`

Grid layout `.grid-layout`

Bootstrap grid fluid `.container-fluid`

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

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

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

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

Buttons icon only

Text link

Text link as `<a>`

This is a link

Text link as `<button>`

Icon only

Text link as `<a>`

This is a link

Text link as `<button>`

Icon only

Text link as `<a>`

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 `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Default as `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Default as `<a>`

Disabled as `<a>`

Default as `<button>`

Disabled as `<button>`

Media

Image