Interactions, buttons, and hover states
![](https://brightspot.brightspotcdn.com/dims4/default/660d2c9/2147483647/strip/true/crop/1104x426+0+0/resize/1104x426!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F07%2Fc9%2F0c834d754dada8322c8a0911b67c%2Ffoundation-primary-buttons.png)
![](https://brightspot.brightspotcdn.com/dims4/default/d0fe501/2147483647/strip/true/crop/1104x426+0+0/resize/800x309!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F07%2Fc9%2F0c834d754dada8322c8a0911b67c%2Ffoundation-primary-buttons.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/d891433/2147483647/strip/true/crop/1106x422+0+0/resize/1106x422!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F5a%2Ffa%2F75a2be8a4116a5e71502f31b6656%2Ffoundation-secondary-buttons.png)
![](https://brightspot.brightspotcdn.com/dims4/default/4af19b2/2147483647/strip/true/crop/1106x422+0+0/resize/800x305!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F5a%2Ffa%2F75a2be8a4116a5e71502f31b6656%2Ffoundation-secondary-buttons.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/b429610/2147483647/strip/true/crop/960x358+0+0/resize/960x358!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F9b%2F50%2Fe454278348d58d031c4f28661084%2Ffoundation-small-buttons-primary.png)
![](https://brightspot.brightspotcdn.com/dims4/default/35776d4/2147483647/strip/true/crop/960x358+0+0/resize/800x298!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F9b%2F50%2Fe454278348d58d031c4f28661084%2Ffoundation-small-buttons-primary.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/c31d6b8/2147483647/strip/true/crop/962x362+0+0/resize/962x362!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F74%2Ff6%2F24aac6b846ae835e63298bf79585%2Ffoundation-small-buttons-secondary.png)
![](https://brightspot.brightspotcdn.com/dims4/default/ef2d984/2147483647/strip/true/crop/962x362+0+0/resize/800x301!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F74%2Ff6%2F24aac6b846ae835e63298bf79585%2Ffoundation-small-buttons-secondary.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/78adb8f/2147483647/strip/true/crop/828x234+0+0/resize/828x234!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fb9%2Fbe%2F4fe85b6e4308a193fbb4b905506c%2Ffoundation-text-label-with-arrow.png)
![](https://brightspot.brightspotcdn.com/dims4/default/5a3f15b/2147483647/strip/true/crop/828x234+0+0/resize/800x226!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fb9%2Fbe%2F4fe85b6e4308a193fbb4b905506c%2Ffoundation-text-label-with-arrow.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/578a6ff/2147483647/strip/true/crop/1694x862+0+0/resize/1694x862!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fbe%2F24%2Fd7132bbe41b1877f8b0e6a944d77%2Ffoundation-promo-states.png)
![](https://brightspot.brightspotcdn.com/dims4/default/e114f93/2147483647/strip/true/crop/1694x862+0+0/resize/800x407!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fbe%2F24%2Fd7132bbe41b1877f8b0e6a944d77%2Ffoundation-promo-states.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/a938c96/2147483647/strip/true/crop/1136x176+0+0/resize/1136x176!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F63%2F7f%2F5446edd14396b8aafd063d5d3b8e%2Ffoundation-standard-body-links.png)
![](https://brightspot.brightspotcdn.com/dims4/default/415137a/2147483647/strip/true/crop/1136x176+0+0/resize/800x124!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F63%2F7f%2F5446edd14396b8aafd063d5d3b8e%2Ffoundation-standard-body-links.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/4c16ea7/2147483647/strip/true/crop/182x196+0+0/resize/182x196!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F2a%2F85%2Facf6864b46b18597b82c0794862a%2Ffoundation-primary-arrows.png)
![](https://brightspot.brightspotcdn.com/dims4/default/4c16ea7/2147483647/strip/true/crop/182x196+0+0/resize/182x196!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F2a%2F85%2Facf6864b46b18597b82c0794862a%2Ffoundation-primary-arrows.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/091c629/2147483647/strip/true/crop/180x198+0+0/resize/180x198!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Ff4%2Fcf%2Fff0769504c50a4652b42e00fe521%2Ffoundation-secondary-arrows.png)
![](https://brightspot.brightspotcdn.com/dims4/default/091c629/2147483647/strip/true/crop/180x198+0+0/resize/180x198!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Ff4%2Fcf%2Fff0769504c50a4652b42e00fe521%2Ffoundation-secondary-arrows.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/c7ddf04/2147483647/strip/true/crop/180x84+0+0/resize/180x84!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fb5%2F3d%2F72c19e534cc088168f94ae53297e%2Ffoundation-disabled-arrows.png)
![](https://brightspot.brightspotcdn.com/dims4/default/c7ddf04/2147483647/strip/true/crop/180x84+0+0/resize/180x84!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fb5%2F3d%2F72c19e534cc088168f94ae53297e%2Ffoundation-disabled-arrows.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/9ee952a/2147483647/strip/true/crop/532x220+0+0/resize/532x220!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F0e%2F7b%2F34232d16470e90e795f38512160c%2Ffoundation-social-bar.png)
![](https://brightspot.brightspotcdn.com/dims4/default/9ee952a/2147483647/strip/true/crop/532x220+0+0/resize/532x220!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F0e%2F7b%2F34232d16470e90e795f38512160c%2Ffoundation-social-bar.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/3ab295d/2147483647/strip/true/crop/604x214+0+0/resize/604x214!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F97%2Fc9%2Fe733481347f3a373f5ddde0d78d7%2Ffoundation-action-bar.png)
![](https://brightspot.brightspotcdn.com/dims4/default/3ab295d/2147483647/strip/true/crop/604x214+0+0/resize/604x214!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F97%2Fc9%2Fe733481347f3a373f5ddde0d78d7%2Ffoundation-action-bar.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|
![](https://brightspot.brightspotcdn.com/dims4/default/f304ac5/2147483647/strip/true/crop/446x124+0+0/resize/446x124!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fca%2Fe6%2F1db5a9cb428e8b523ebd35828a73%2Ffoundation-accordion-controls.png)
![](https://brightspot.brightspotcdn.com/dims4/default/f304ac5/2147483647/strip/true/crop/446x124+0+0/resize/446x124!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fca%2Fe6%2F1db5a9cb428e8b523ebd35828a73%2Ffoundation-accordion-controls.png)
Square - Active (Button) | |
Component | button/primary/square/background |
Width, Height | 141px, 46px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Active (Button Label) | |
Component | button/primary/square/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Square - Hover (Button) | |
Component | button/primary/square/stroke |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | Inside, 1px, #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Hover (Button Label) | |
Component | button/primary/square/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button) | |
Component | button/primary/square/background (disabled) |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
HTML
|
Square - Disabled (Button Label) | |
Component | button/primary/square/background (disabled) |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Active (Button Label) | |
Component | button/primary/rounded corner/stroke |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button) | |
Component | button/primary/rounded corner/background |
Width, Height | 141px, 46px |
Radius | 5px |
Colors | #EE0120 |
CSS/HTML | CSS
HTML
|
Rounded - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 141px, 46px |
Colors | #FFFFFF |
Borders | #999999 |
CSS/HTML | CSS
HTML
|
Rounded - Disabled (Button Label) | |
Component | button/primary/rounded corner/stroke (disabled) |
Width, Height | 91px, 18px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 18px |
Transform | Titlecase |
Paragraph Spacing | 10px |
Color | #999999 |
CSS/HTML | CSS
HTML
|
P
Pill - Active (Button) | |
Component | button/primary/pill/background |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
CSS/HTML | CSS
|
Pill - Active (Button Label) | |
Component | button/primary/pill/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #FFFFFF |
CSS/HTML | CSS
|
Pill - Hover (Button) | |
Component | button/primary/pill/stroke |
Width, Height | 141px, 46px |
Radius | 40px |
Colors | #EE0120 |
Borders | Center, 1px |
CSS/HTML | CSS
|
Pill - Hover (Button Label) | |
Component | button/primary/rounded corner/background |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #EE0120 |
CSS/HTML | CSS
|
Pill - Disabled (Button) | |
Component | button/primary/pill/disabled |
Width, Height | 141px, 46px |
Colors | #F7F7F7 |
CSS/HTML | CSS
|
Pill - Disabled (Button Label) | |
Component | button/primary/pill/disabled |
Width, Height | 91px, 19px |
Typeface | Roboto-Bold |
Size | 16px |
Align | Center |
Line Height | 19px |
Transform | Titlecase |
Color | #999999 |
CSS/HTML | CSS
|