OSRAM First Spirit - Overview of all web modules
Jump directly to the module you're looking for
12 columns | 2 x 6 columns | flexible columns | special modules |
|---|---|---|---|
| M001 Product Carousel | M401 6 col + M303 12 col - Text or Quote | M501 4,6,8 col - Image, video and text incl. background + Slider | M601 Download Table |
| M201 Full size Text on Image, Video + Slider | M405 6 Col - Image, Video + Text incl. background colour | M502 4,6,8 col - Text on Image, video | M601 Tables |
| M202 Full size Module Container | M503 3,4 col - Text on Image, video | M603 Accordion | |
| M301/M302 H1_H2 Headline | M 504 Universal 3,4 col - Image, video + text w/ background - w/ and w/o Slider | M606 Image Carousel | |
| M305 12-col Text on Image, Video + Slider | M504 3,4 col - Text on Image, video + Text incl. background colour | M605 (tabs) | |
| M307 12-col Note | M505 3,4 col - Benefits | ||
| M308 Service Note | M506 2x3 col - Image, Video + 6 col Text | ||
| M309 12 col - Slider with Buttons | M507 2-9 col - Image, Video + Rest Col - Text | no longer in use | |
| M310 Featured Question CTA | M508 2 col - Image, Video + Text | M103/104 Full size Text on Image, Video + Search (no longer in use) | |
| M509 4x3 col + 2x6 col - Text on Image, Video Item | M203 Full size Comparison Slider (no longer in use) | ||
| M510 Product Description Area | M406 6 col image text automativ news press cases teaser (no longer in use) | ||
| M511 4/6/8 col slider with right / left position |
Modules of 12 colums (full page width)
optional category
M201 / Full size text on image, video + Slider
optional subheadline
- This module is mainly used for the start page, our so-called "main stage teaser".
- It works with 1 image, but can hold up to 5.
- Any more than 2 will turn it into a slider.
- It can hold a search bar which is not recommended.
- Image size
-
- w: 1920
- h: 768 (recommended)
optional category
Watch that all images be cropped to the same height
optional subheadline
- Text can be Orange, Gray, Black, White. In this test, the "text" (copy) can only be black.
- Text can be vertically aligned: top, center, bottom.
- Text can be horizontally aligned: left, right.
- If it's a slider, we can select "auto play" or manual sliding.
Discover our latest video
optional subheadline
- The asset can be an image or a video
- If we choose a video (like here), an image to be displayed must be chosen additionally.
- Keep in mind that for a video, the "play" icon will appear in the middle and cannot be moved.
- Losing your mind? Check the element left of this one if you see any unexpected link, image or text.
M202 Full Size Module Container
this container can be "light gray" or "dark gray" (this one is dark gray) and can be equipped with any kind of module we want
This is an M507 module within M202
Above is an M301 module, holding the headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
M001 Product Carousel
optional subheadline
Module M301/M302 H1_H2 Headline - can be black, orange or gray
optional subheadline - can be black, orange or gray, independent of headline
optional category - color can be white, orange, black, gray
Module M305 / 12-col Text on Image, Video + Slider
optional subheadline - color can be white, orange, black, gray
We can add optional text. we can use different formats. Color can be white, orange, black, gray
This module can have one image or video.
We can also make it into a slider.
We can add many links in a link list.
See next slide for all link variants
Image Size
w: 1260
h: 700 (recommended)
A second image / video makes the module into a slider
Link Variant: Buttonlink #1 Button colored Link Variant: Buttonlink #2 Button white Link Variant: Buttonlink #3 Button BG colored Link Variant: Buttonlink #4 Button BG grey Link Variant: Buttonlink #5 Border colored Link Variant: Textlink #1 Textlink BG white Link Variant: Textlink #2 Textlink BG colored Link Variant: Textlink #3 Textlink BG greyA slider can contain up to 5 images or videos
Link Variant: InnerTextlink #1 - Textlink BG white Link Variant: InnerTextlink #2- Textlink BG colored Link Variant: InnerTextlink #3 - Textlink BG Grey Link Variant: Footerlink - Textlink BG white Do not use link variant "image as link" It behaves randomly.Module M308 / Service Note
Optional text
optional free text
optional footnote text
Modules with flexible colums
M505 / 3,4 Col - Benefits
Images should be icons
This module must have 3 (max 4) elements
No links possible
No choices regarding colors in this module
Regular images work, but look a bit strange
|
|
|
M506 / 2x3 Col - Image, Video + 6 Col Text
optional subheadline
Text can be aligned left or right
Must have 2 pictures/videos with fixed size
Each picture/video can be connected to a link
This text can include a link
M506 / 2x3 Col - Image, Video + 6 Col Text. Text aligned left.
Text can be aligned left or right
Image Size
w: 588
h: flexible
M507 / 2-9 Col - Image, Video + Rest Col - Text
1 image spreads over 2-9 colums / This one is 9 columns
The rest of the columns will be text. The text can be aligned left or right.
Image Sizes
- 9 col: w 940, h flexible
- 8 col: w: 830 h: flexible
- 7 col: w 724 h: flexible
- 6 col: w 1230 h: flexible
- 5 col: w 1016 h: flexible
- 4 col: w 800 h: flexible
- 3 col: w 584 h: flexible
- 2 col: w 372 h: flexible
M507 / 2-9 Col - Image, Video + Rest Col - Text
1 image spreads over 2-9 colums / This one is 2 columns
The rest of the columns will be text. The text can be aligned left or right.
M507 / 2-9 Col - Image, Video + Rest Col - Text
1 image spreads over 2-9 colums / This one is 5 columns
The rest of the columns will be text The text can be aligned left or right.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
M508 / 2 Col - Image, Video + Text
Image can be connected to a link
Text can include links
- Image Size
- w: 430
- h: flexible
Image can be aligned left or right
Buttonlink #1 - Button colored Buttonlink #2 - Button white Buttonlink #3 - Button BG colored Buttonlink #4 - Button BG greyM509 / 4x3 col + 2x6 col - Text on Image, Video Item
6 images, always aligned like this. On big tiles, we can choose left or right text alignment.
Three options for text: (1) Category
(2) Headline
(3) Subline
All of the tiles can have one link each
This Text is aligned "top"
Text can be aligned top, center or bottom
Here it's aligned center
Image Sizes
big: w 1230, h 1230 / small: w 586, h 586
