EN
Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
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.
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!
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.
Colors that represent the Tschudi Group.
Colors that can be used to create depth, borders and fill dark sections
Colors that can be used to create depth, borders and fill light sections
Colors that are used for text elements.
Status messages, warnings, accents, etc.
Gradients that can be placed over images.
All buttons are based on the primary button. Add combo classes to modify a button.
Add .small og .big classes to the buttons to change the default size of the buttons.
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.
All labels are based on the primary label.
Add .small og .big classes to the labels to change the default size of the labels.
To add a label icon you have to add the class .label-icon to the icon.
Inputs are used to collect information from the user.
Textareas are used to collect longer answers like questions and messages from a user within a form block.
Select fields make users choose between a list of predefined options. The date picker allows users to select a formatted date.
Within a group of boxes the user can select multiple checkboxes, but only one radio button.
Check that user is not a robot.
Search field for discovering content.
Success and error messages for submitting forms or displaying warning messages.
Success and error messages that appear after the user tries to submit a form.
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}.
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.
Use .top-clear, .full-clear or .bottom-clear to remove the related margin from any element.
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.
Use these classes to hide elements on different breakpoints.
Shadows can be added to cards or other elements to create a sense of depth.
Cards can be used to showcase items like news or projects.
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.
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.
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.
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.
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.
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.
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.
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.
This is the main navigation bar. It should be used on every page unless there is a very good reason not to. You can add the class .sticky to make the meny stick to the top of the page on scroll.
This is a light version of the nav menu. It can be used for other interfaces than this website like an internal admin module.
This footer is a Webflow Symbol. Add the "footer" symbol to all pages. When updating the footer symbol it will update all instances of the footer across all pages.
Combining Group resources to provide the right solutions for our customers.
Combining Group resources to provide the right solutions for our customers.
