Buttons

Osram Style	Link	Link with icon left	Bag Style
border: gray bg: transparent text: gray hover border: orange hover bg: orange hover text: white	Linkable Button	Linkable Button	border: gray bg: transparent text: gray hover border: green hover bg: green hover text: white
border: orange bg: transparent text: orange hover border: orange hover bg: orange hover text: white	Linkable Button	Linkable Button	border: green bg: transparent text: green hover border: green hover bg: green hover text: white
border: white bg: orange text: white hover border: orange hover bg: white hover text: orange	Linkable Button	Linkable Button	border: white bg: green text: white hover border: green hover bg: white hover text: green
border: white bg: orange text: white hover border: white hover bg: white hover text: orange	Linkable Button	Linkable Button	border: white bg: green text: white hover border: white hover bg: white hover text: green
border: white bg: transparent text: white hover border: orange hover bg: orange hover text: white	Linkable Button	Linkable Button	border: white bg: transparent text: white hover border: green hover bg: green hover text: white

Example of Button with type reset

Links

Showcase for new link design.

	#3c3c3c default	#FF6600/#49AD33 orange/green	#999999 gray	#FFFFFF white
default	Link	Link	Link	Link
default multiline	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp
underlined	Link	Link	Link	Link
arrow	Link	Link	Link	Link
arrow multiline	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp
icon	Link	Link	Link	Link
icon & underlined	Link	Link	Link	Link
icon multiline	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp	https://www.osram.com/osram_com/news-and-knowledge/hospitality-lighting/lighting-design-and-products-for-all-hospitality-areas/lighting-for-lobby-and-reception/index.jsp
inline text	N/A	Some text before link and after	Some text before link and after	N/A

Sketchfab 3D Link

Showcase for sketchfab links.

All links need the classes "mfp-iframe" and "lightbox" to work.

	Example	Code
Button	Linkable Button	<a href="//sketchfab.com/models/81d627cd5ec047f1b2fae0e0791701ba" class="link-btn action-btn mfp-iframe lightbox" title="Click" style="cursor: pointer;">Linkable Button</a>
Link unterlined	Link	<a class="text-link-b underline mfp-iframe lightbox" href="//sketchfab.com/models/81d627cd5ec047f1b2fae0e0791701ba" title="Link" style="cursor: pointer;">Link</a>
Link arrow	Link	<a class="icon-link-b mfp-iframe lightbox" href="//sketchfab.com/models/81d627cd5ec047f1b2fae0e0791701ba" title="Link" style="cursor: pointer;"><span class="ms-icon_link"></span> Link</a>

Example

Code

Button

<a href="//sketchfab.com/models/81d627cd5ec047f1b2fae0e0791701ba" class="link-btn action-btn mfp-iframe lightbox" title="Click" style="cursor: pointer;">Linkable Button</a>

Link unterlined

<a class="text-link-b underline mfp-iframe lightbox" href="//sketchfab.com/models/81d627cd5ec047f1b2fae0e0791701ba" title="Link" style="cursor: pointer;">Link</a>

Link arrow

<a class="icon-link-b mfp-iframe lightbox" href="//sketchfab.com/models/81d627cd5ec047f1b2fae0e0791701ba" title="Link" style="cursor: pointer;"><span class="ms-icon_link"></span> Link</a>

Icons

These icons are part of a web font icon set. The font set can be downloaded below.

Icons can be embedded like this. Where ligature is the first value beneath the icon.

<div class="ms-icon">ligature</div>

<div class="ms-icon">blank_doc</div>

Icons can be embedded like this where class is the second value beneath the icon.

<div class="class"></div>

<div class="ms-icon_blank-doc"></div>

Single color icons

Currency Icons

Multicolor Icons (special HTML construct)

Status Icons (multicolor)

Animated Icons

Checkbox

Checkbox with check icon

Compare

Download Icon Font

Static assets

In this context we mean with static assets all those static files which were placed on the webserver and which were relevant for web browsers and search engines:

favicon.ico
apple-touch-icon.png (for iOS devices)
browserconfig.xml, tile.png and tile-wide.png (for Windows Mobile devices)
robots.txt
crossdomain.xml

Download static assets OSRAM

Social Media Icons

Icons are supplied by the webservice of the Digital Asset Management tool.