Typography

Section header

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header
H6 Header

Section Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris pharetra et ultrices neque ornare. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Nunc sed augue lacus viverra vitae congue eu consequat ac.

Turpis massa tincidunt dui ut ornare lectus sit amet est. Adipiscing vitae proin sagittis nisl rhoncus mattis. Integer vitae justo eget magna fermentum iaculis eu. Elit pellentesque habitant morbi tristique.

Colors

dark
#121212
dark-grey
#4D4D4D
light-grey
#F2F2F2
grey
#EEEEEE
pure-white
#FFFFFF
medium-grey
#A2A2A2
ui-green
#00BF9A
ui-red
#EA1919
utz-brown
#26211E
beluga-burundi-dark
#18324F
beluga-burundi-light
#304663
beluga-brazil-dark
#112F2C
beluga-brazil-light
#214842
beluga-gold
#CFA072
beluga-blackberry
#23021B
beluga-grape
#3B0613
beluga-juicy
#E77334
beluga-nuts
#38231C
beluga-tropical
#FB5555
beluga-creamy
#F8F4EE
beluga-grey
#38434B
beluga-dark-grey
#0C1116
ui-focus
#FEC58E
white
#F7F7F7
white-two
#EAEAEA

Buttons and links

On light background

cta dark

secondary dark

text dark

On dark background

cta light

secondary light

text light

Form controls

You can use `form__message` to get these kind of message, modifiers are small and bold

Checkbox has wrapper div with input and label inside, only the class on wrapper and label are important, input itself is hidden

Inputs are styled via tag name for default visual appearance, you can change them as needed

Select needs to have wrapper with `.select` class. Inside you can use select with any class you might need. Suggestion is to have fieldset as wrapper

You can use `input--half` while in form to make them split in one row. Row has to have justify space between

Tabs

First item
To get this kind of tabs (smaller, all centered, for example on product page filters), you can use following markup, the tag names aren't important, just the classes 

<section class="tabs tabs--small">
  <div class="tabs__header">First item</div>
  <div class="tabs__content">Content I</div>
  <div class="tabs__header">Second item</div>
  <div class="tabs__content">Content II</div>
</section>
Second item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris pharetra et ultrices neque ornare. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Nunc sed augue lacus viverra vitae congue eu consequat ac.

Turpis massa tincidunt dui ut ornare lectus sit amet est. Adipiscing vitae proin sagittis nisl rhoncus mattis. Integer vitae justo eget magna fermentum iaculis eu. Elit pellentesque habitant morbi tristique.

First item
To get this kind of tabs (smaller, all centered, for example on product page filters), you can use following markup, the tag names aren't important, just the classes 

<section class="tabs tabs--simple">
  <div class="tabs__header">First item</div>
  <div class="tabs__content">Content I</div>
  <div class="tabs__header">Second item</div>
  <div class="tabs__content">Content II</div>
</section>
Second item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris pharetra et ultrices neque ornare. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Nunc sed augue lacus viverra vitae congue eu consequat ac.

Turpis massa tincidunt dui ut ornare lectus sit amet est. Adipiscing vitae proin sagittis nisl rhoncus mattis. Integer vitae justo eget magna fermentum iaculis eu. Elit pellentesque habitant morbi tristique.

First item
To get this kind of tabs (usually full page, for example login/register), you can use following markup, the tag names aren't important, just the classes 

<section class="tabs tabs--wide">
  <div class="tabs__header">First item</div>
  <div class="tabs__content">Content I</div>
  <div class="tabs__header">Second item</div>
  <div class="tabs__content">Content II</div>
</section>
Second item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris pharetra et ultrices neque ornare. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Nunc sed augue lacus viverra vitae congue eu consequat ac.

Turpis massa tincidunt dui ut ornare lectus sit amet est. Adipiscing vitae proin sagittis nisl rhoncus mattis. Integer vitae justo eget magna fermentum iaculis eu. Elit pellentesque habitant morbi tristique.

------- breadcrumb gray table form blogs modal - fullscreen with close x minicart - productrow which is same from checkout, account orders, just always displayed in mobile form product overview NES Special Editions Agent Highlight missing --------
Wählen Sie Ihr Land
Café Royal Schweiz
Café Royal verwendet Cookies, um Ihnen den bestmöglichen Service zu gewährleisten. Wenn Sie auf der Website weitersurfen, stimmen Sie der Cookie-Nutzung zu. Weitere Informationen finden Sie in unseren Datenschutzbestimmungen.