Bosch Professional Power Tools & Accessories

BUTTONS

There are 2 types of Buttons:

Navigational (NAV) Buttons and Call to Action (CTA) Buttons

Navigational Buttons are used to move a User from one piece of content to the next, such as “Learn More”, “Read More” or “Find a Dealer”.. Call to Action Buttons are used to elicit a specific User Response or Action, such as “Buy Now”, or “Shop Now”..

 

NAV BUTTONS:

 Font height: 16px

 Line height: 30px

Line height: 30px

 Padding left: 10px

 Padding right: 10px

Background color: none, border-width: 2px, radius: 0

CTA BUTTONS:

 Font height: 16px

 Line height: 30px

Line height: 30px

 Padding left: 10px

 Padding right: 10px

Background color: E20015, border: none, radius: 0

 Font height: 16px

 Line height: 30px

Line height: 30px

 Padding left: 10px

 Padding right: 10px

Background color: none, border-width: 2px, radius: 0

 Font height: 16px

 Line height: 30px

Line height: 30px

 Padding left: 10px

 Padding right: 10px

Background color: E20015, border: none, radius: 0

NAV BUTTON HOVER:

CTA BUTTON HOVER: NO CHANGE

 Background-color: 005691, border: none, radius: 0

NAV BUTTON ON WHITE:

 Font height: 16px, color: 003b6a

Background-color: none, border: 2px, border-color: 003b6a, radius: 0

CTA BUTTON ON WHITE: NO CHANGE

LIVE BUTTON PREVIEWS

NAV Button – desktop width=175px

NAV Button – mobile width=300px

CTA Button – desktop width=175px

CTA Button – mobile width=300px

NAV Button – desktop width=175px

NAV Button – mobile width=300px

CTA Button – desktop width=175px

CTA Button – mobile width=300px

HOT SPOTS

Image hotspot content types allow you to create interactive image maps. When a user clicks on a hotspot, an action occurs such as  revealing a tooltip with descriptor text, additional imagery or a new file opens… 

Hotspot – NORMAL

Circle: white
Outline: Bosch Light Gray W25
Icon: black

Hotspot – HOVER

Circle: Bosch Light Blue W50
Outline: Bosch Light Gray W25
Icon: white

Hotspot – PRESSED

Circle: Bosch Light Blue
Outline: Bosch Light Gray W25
Icon: white

HOT SPOTS – NA

Hotspot – NORMAL

Circle: E20015
Outline: white
Icon: white

Hotspot – HOVER

Circle: Bosch Light Blue W50
Outline: Bosch Light Gray W25
Icon: white

Hotspot – PRESSED

Circle: Bosch Light Blue
Outline: Bosch Light Gray W25
Icon: white

Desktop

Tablet

Mobile

 2.25 rem, 36px

 2.25 rem, 36px

2.75 rem, 44px

2.75 rem, 44px

2.5 rem, 40px

2.5 rem, 40px

 2.25 rem, 36px

 2.25 rem, 36px

2 rem, 32px

2 rem, 32px

 1.25 rem, 20px

 1.25 rem, 20px

1 rem, 16px

1 rem, 16px

NUMBER CALL OUTS

Number Callouts are great for highlighting specific attributes of a product where interactivity may not be an option or necessary.

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

NUMBER CALL OUTS – NA

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

TITLE TEXT ALL CAPS 24px

Body text 16px, line height: 17px, Initial caps sentence case, font weight: regular

Desktop

Tablet

Mobile

 2.25 rem, 36px

 2.25 rem, 36px

2.75 rem, 44px

2.75 rem, 44px

2.5 rem, 40px

2.5 rem, 40px

 2.25 rem, 36px

 2.25 rem, 36px

2 rem, 32px

2 rem, 32px

 1.25 rem, 20px

 1.25 rem, 20px

1 rem, 16px

1 rem, 16px