In addition to colors and typographic styles, Daimler Mobility also uses additional components on their website. While some of those components are just recolored and restyled versions of their daimler.com counterparts (the footer for example), some are entirely new.
Please note that Mobility components are exclusively reserved for the Mobility website.
The large teaser exists in two variants, text left-aligned and text right-aligned. Headlines on the Daimler Mobility website are not placed on backgrounds. Be careful to choose simple and low-contrast images so that the headline can stand out easily.
The circular teaser components is used to link multiple pages next to each other. The component can be filled flexibly with two, three or four pieces of content. Each teaser consists of a circular image, a headline, a description and a button.
Alternating teasers are used for news or press releases. They work best for serialised, blog-like content. This component features an expandable image, a headline, a publishing date plus text and a button.
Buttons are colored in light petrol and the text label is all uppercase. Except those alternations, they behave exactly like the daimler.com button component.
The footer is basically the same like on daimler.com except coloring of the hygienic links area and the missing meta information. Instead of the meta section, an image background is used to add visual variety to the website.
Designs of the Daimler Mobility components are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.
See the Sketch Design Kit