01 - Typography

Headings

H1 Heading

h1 {font-size: 55px;}

H2 Heading

h2 {font-size: 44px;}

H3 Heading

h3 {font-size: 35px;}

H4 Heading

h4 {font-size: 28px;}
H5 Heading
h5 {font-size: 22px;}
H6 Heading
h6 {font-size: 18px;}

Small heading

.small-heading {font-size: 22px;}

Paragraphs

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

Paragraph {font-size: 18px;}

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

Paragraph.big {font-size: 20px;}

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

Paragraph.small {font-size: 16px;}

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

Link & .accent  & .delete & .highlight
Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
Block Quote {font-size: 20px;}

Rich text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Crane lifting container with Tschudi logo
Image caption

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

02 - Colors

Brand colors

Colors that represent the Tschudi Group.

primary-color-light
#43b5df
primary-color
#009fda
primary-color-dark
#007aa6
secondary-color-light
#f03434
secondary-color
#bd2929
secondary-color-dark
#a32323

Dark colors

Colors that can be used to create depth, borders and fill dark sections

dark-color-lightest
#275499
dark-color-light
#1a3866
dark-color
#13294b
dark-color-dark
#0f1d33

Light colors

Colors that can be used to create depth, borders and fill light sections

white-color
#fcfeff
light-color-lightest
#f2fcff
light-color-light
#e5f8ff
light-color
#f9f3ef
light-color-dark
#dfdcce

Typography colors

Colors that are used for text elements.

text-color-light
#dfdcce
text-color-paragraphs
#686a6e
text-color-headings
#13294b
text-color-dark
#0f1d33

Extra colors

Status messages, warnings, accents, etc.

accent-color
#ff7f41
positive-color
#52cc14
negative-color
#cc1414
warning-color
#d6da00

Gradient Overlays

Gradients that can be placed over images.

#13294b - 60%
#001c26 - 98%
#e1f7ff - 82%
#dae3e5 - 98%

03 - Logo

Logo variations

Variations of the Tschudi Group logo. Click the link below each element to download it.

logo Download: SVG
Light logo Download: SVG
Logo flag Download: SVG

04 - Buttons

All buttons

All buttons are based on the primary button. Add combo classes to modify a button.

Button text
.button.primary
Button text
.button.red
Button text
.button.light
Button text
.button.Orange

Button sizes

Add .small og .big classes to the buttons to change the default size of the buttons.

Button text
.button.small
Button text
.button.big

Button icons

To add a button icon you have to add the class .button.icon to the button itself and the the class .button-icon to the icon image.

Action textbl
Go to page
.button-icon
Action
Go to page
.button-icon.small
Action
Go to page
.button-icon.big
Action
Go to page
.button.text.icon

05 - Labels

All labels

All labels are based on the primary label.

Kategori
.Label
Kategori
.Label.Light
Kategori
.Label.green
Kategori
.Label

Label sizes

Add .small og .big classes to the labels to change the default size of the labels.

Kategori
.Label.small
Kategori
.Label
Kategori
.Label.big

Label icons

To add a label icon you have to add the class .label-icon to the icon.

Kategori
Close
.Label-icon.small
Kategori
Close
.Label-icon
Kategori
Close
.Label-icon.big

06 - Form elements

Input

Inputs are used to collect information from the user.

.input
.input.big
.input.small
.help-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Textarea

Textareas are used to collect longer answers like questions and messages from a user within a form block.

.input.text-area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.input.text-area-big
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Select field & date picker

Select fields make users choose between a list of predefined options. The date picker allows users to select a formatted date.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.input.select-field
.input.date-picker
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checkbox and radio buttons

Within a group of boxes the user can select multiple checkboxes, but only one radio button.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.checkbox
.radio-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

reCAPTCHA

Check that user is not a robot.

.recaptcha
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Search Field

Search field for discovering content.

.Search wrapper & .input.big.search & .button.search

07 - Dialogs and form messages

Dialogs

Success and error messages for submitting forms or displaying warning messages.

This is a positive dialog message!
Close
.dialog
This is a negative dialog message! nfdg
Close
.dialog.negative
This is a warning dialog message!
Close
.dialog.warning

Form responses

Success and error messages that appear after the user tries to submit a form.

This is a success message!
.dialog
This is an error message!
.dialog.negative

08 - Structural elements

Base elements

The two base elements are .section and .container. The section class ensures consistent padding for sections. The container class centers itself to the page and has a {max width: 1200px}.

.section {padding: 0px 40px;}
.section.p40 {padding: 40px 40px;}
.section.p80 {padding: 80px 40px;}
.section.p100 {padding: 100px 40px;}
.container {max-width: 1200px; margin: 0px auto;}
.full-width-container {width: 100%; margin: 0px auto;}

Flex Options

The default .flex class har 2 columns on desktop and 1 on mobile. 40px column spacing on desktop and tablet. 20px spacing on mobile. Add the combo class .col-x to a flex child where "x" is the number of columns on desktop.

.flex-child.col-1
.flex || .flex-child.col-2
.flex-child.col-3
.flex-child.col-4
.flex-child.col-5
.flex-child.col-6

Margin clear

Use .top-clear, .full-clear or .bottom-clear to remove the related margin from any element.

No top margin
.top-clear {margin-top: 0px;}
No top or bottom margin
.full-clear {margin-top: 0px; margin-bottom: 0px;}
No bottom margin
.bottom-clear {margin-bottom: 0px;}

Wrappers

Elements can be placed inside wrappers to add margins without having to edit the element itself. All wrappers have a combination of the class .wrapper and either, .m20, .m40, .m60, .m0-20, .m0-40 or .m0-60.

.m20 {margin: 20px 0px;}
.m40 {margin: 40px 0px;}
.m60 {margin: 60px 0px;}
.m0-20 {margin-top: 0px; margin-bottom: 20px;}
.m0-40 {margin-top: 0px; margin-bottom: 40px;}
.m0-60 {margin-top: 0px; margin-bottom: 60px;}

Hide elements on breakpoints

Use these classes to hide elements on different breakpoints.

This text is hidden on screens that have a width of 479px and below.
.hide-mobile-portrait-down The element will be hidden on screens with a width of 479px and BELOW.
This text is hidden on screens that have a width of 767px and below.
.hide-mobile-landscape-down The element will be hidden on screens with a width of 767px and BELOW.
This text is hidden on screens that have a width of 480px and above.
.hide-mobile-landscape-up The element will be hidden on screens with a width of 480px and ABOVE.
This text is hidden on screens that have a width of 991px and below.
.hide-tablet-down The element will be hidden on screens with a width of 991px and BELOW.
This text is hidden on screens that have a width of 786px and above.
.hide-tablet-up The element will be hidden on screens with a width of 768px and ABOVE.
This text is hidden on screens that have a width of 993px and above.
.hide-desktop-up The element will be hidden on screens with a width of 993px and ABOVE.

09 - Shadows

Shadows

Shadows can be added to cards or other elements to create a sense of depth.

.shadow
.shadow-small
.shadow-big

10 - Cards

Cards

Cards can be used to showcase items like news or projects.

Our services

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

Action
Go to page

Our services

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

Action
Go to page

11 - Tabs

Horizontal tabs

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Vertical tabs

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

12 - Slider

Box slider

The default slider has a height of 400px. To change the size of the slider you can add the following classes to the .slider class: .small and .large.

previous
.slider {height: 400px;}
previous
.slider.large {height: 600px;}
previous
.slider.small {height: 200px;}

Carousel slider

The carousel slider is great for displaying partner logos or other images that are related. The amount of images shown in each slide can be adjusted by adding the .big class to the .carousel-slide slide.