Default
$text_lt_default
Light
$text_lt_light
Lighter
$text_lt_lighter
Default Dk
$text_dk_default
Light Dk
$text_dk_light
Lighter Dk
$text_dk_lighter
Bg Light
$bg_light
Bg Dark
$bg_dark
Bg Gradient
$bg_gradient
Card Light
$card_light
Card Dark
$card_dark
Success
$success
Warning
$warning
Error
$error
Info
$info
Neutral
$neutral
Data 1
$data_1
Data 2
$data_2
Data 3
$data_3
Data 4
$data_4
Data 5
$data_5
Data 6
$data_6
Data 7
$data_7
Data 8
$data_8
Primary
$primary_action
Active Light
$active_light
Active Dark
$active_dark
Border Light
$border_light
Border Dark
$border_dark
Shadow
$shadow
Windows
$windows
Siding
$siding
Doors
$doors
Solar
$solar
Roofing
$roofing
Gutters
$gutters
Attic Insulation
$insulation
Category 1
$category_1
Category 2
$category_2
Category 3
$category_3
Category 4
$category_4
Category 5
$category_5
Category 6
$category_6
Category 7
$category_7
Category 8
$category_8
Category 9
$category_9
Category 10
$category_10
Category 11
$category_11
Category 12
$category_12
Category 13
$category_13
Category 14
$category_14
Category 15
$category_15
Category 16
$category_16
Category 17
$category_17
Category 18
$category_18
Category 19
$category_19
Category 20
$category_20
Category 21
$category_21
When building your interface it is common to add max width to specific kits so the interface looks good at all sizes. We've made it easy to add max with ANY kit through our global props. See below:
Available in every kit. These are added globally as they are most flexible when developing.
<Card maxWidth="xl">{'Card content'}</Card>
When dealing with numbers it can be helpful to controll the way the font handles number spacing. A font like proxima nova is an open type face that enables us to use tabular spacing for example. This alligns the numbers equally to make those numbers in a table easier to compare. This is avaliable in EVERY kit as a global prop. See example:
Available in every kit. These are added globally as they are most flexible when developing.
normal
|
tabular
|
---|---|
$1,231,123,123.00
|
$1,231,123,123.00
|
$7,444,112,512.00
|
$7,444,112,512.00
|
<Currency amount="2,000" numberSpacing="tabular" />
If you're going to be using 'absolute' position, you might find it handy to use some of the index properties. We have multiple ways to use z-index, take a look at the examples below.
Available in every kit. These are added globally as they are most flexible when developing.
<Pill text="example" zIndex="5" />
@import "tokens/positioning .selector { z-index: $z_10; }
Odds are you might want to build or expand upon the text patterns we have provided. If so below is a good reference of the tokens that are available for you and your typography needs.
Make up your own styles using Playbook tokens to keep your site consistent.
Available in every kit. These are added globally as they are most flexible when developing.
React: <Body lineHeight="looser"> Body content <Body/> Rails: <%= pb_rails("body", props: { line_height:"looser" }) do %> Body content <% end %>
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
@import "tokens/line_height"; .selector { line-height: $lh_tight; }
Used for building Kits: Spacing is sized by 8px which serves as the starting point and base that all spacing options follow.
Available in every kit. These are added globally as they are most flexible when developing.
<Badge paddingTop="sm"/>
Make your own sytles using Playbook tokens to keep your site consistent.
@import "tokens/spacing" .selector { margin-top: $space_lg; }
We have very specific settings for border radius to keep the interface looking consistent and clean. If you ever need to access these to build new things here are examples for how to do that.
Make up your own styles using Playbook tokens to keep your site consistent.
@import "tokens/border_radius" .selector { border-radius: $border_radius_xl; }
Odds are, you might want to build or expand upon the text patterns we have provided. Below are the tokens that are available for you and your typography needs.
Make up your own styles using Playbook tokens to keep your site consistent.
@import "tokens/typography"; .selector { font-size: $heading_1; letter-spacing: $lspace_tight; }
Shadows are a night way of showing depth. Modals, buttons, & popovers are examples of items that need to have a shadow to indicate their position relative to others. Our global props and tokens help you expand those to the other custom elements you build using playbook.
Available in every kit. These are added globally as they are most flexible when developing.
<Button shadow="deeper">Button Text</Button>
Make your own styles using Playbook tokens to keep your site consistent.
@import "tokens/shadows"; .selector { box-shadow: $shadow_deep; }
<Card display="flex"> Card content <Card/> <Card display={ xs: "hidden", sm: "flex", md: "inline", lg: "inline_block", xl: "block" } > Card content <Card/>
Screen Size | @media screen | Class | Properties |
---|---|---|---|
xs | @media screen and (max-width: 575px) | .display_xs_hidden | display: hidden !important |
sm | @media screen and (max-width: 576px) | .display_sm_block | display: block !important |
md | @media screen and (max-width: 768px) | .display_md_inline_block | display: inline-block !important |
lg | @media screen and (max-width: 992px) | .display_lg_inline | display: inline !important |
xl | @media screen and (max-width: 1200px) | .display_xl_flex | display: flex !important |
Available in every kit. These are added globally as they are most flexible when developing.
<Body cursor="pointer"> Body content <Body/>
Available in every kit. These are added globally as they are most flexible when developing. *Screen sizes are optional.
Props | Screen Sizes | Values |
---|---|---|
flexDirection
|
xs
sm
md
lg
xl
|
row
column
rowReverse
columnReverse
|
flexWrap
|
xs
sm
md
lg
xl
|
wrap
nowrap
wrapReverse
|
justifyContent
|
xs
sm
md
lg
xl
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
justifySelf
|
xs
sm
md
lg
xl
|
start
end
center
auto
stretch
|
alignItems
|
xs
sm
md
lg
xl
|
flexStart
flexEnd
start
end
center
stretch
baseline
|
alignContent
|
xs
sm
md
lg
xl
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
alignSelf
|
xs
sm
md
lg
xl
|
start
end
center
auto
stretch
baseline
|
flex
|
xs
sm
md
lg
xl
|
none
initial
auto
1
|
flexGrow
|
xs
sm
md
lg
xl
|
0
1
|
flexShrink
|
xs
sm
md
lg
xl
|
0
1
|
order
|
xs
sm
md
lg
xl
|
1
2
3
4
5
6
7
8
9
10
11
12
none
|
<Body justifySelf="start"> Body content <Body/> <Body justifySelf={{xs: "start", md: "center", xl: "baseline"}}> Body content <Body/>