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