Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
Use "success" and "error" for status. View footer notes for things to avoid.
This kit uses default
color by default, and can be replaced with colors below:
light
lighter
success
error
link
These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
<%= pb_rails("body", props: { text: "I am a body kit" }) %> <%= pb_rails("body", props: { text: "I am a body kit (Light)", color: "light" }) %> <%= pb_rails("body", props: { text: "I am a body kit (Lighter)", color: "lighter" }) %> <%= pb_rails("body", props: { text: "I am a body kit (Link)", color: "link" }) %> <%= pb_rails("body", props: { text: "I am a body kit (Error)", color: "error" }) %> <%= pb_rails("body", props: { text: "I am a body kit (Success)", color: "success" }) %>
Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.
- Bradley Whitford
Using two global props can greatly improve the readability of articles and even forms. Set Max Width to md
, and Line Height to loose
.
<%= pb_rails("body", props: { line_height: "loose", max_width: "md" }) do %> <p>Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.</p> <br /> <p>- Bradley Whitford</p> <% end %>
Playbook styles the b
, strong
, a
. i
, em
, small
and u
tags within the body kit to match Playbook's design system.
<%= pb_rails("body") do %> <b>This text is using the <%="<b>"%> tag</b> <br /> <br /> <strong>This text is using the <%="<strong>"%> tag</strong> <br /> <br /> <a href="#">This text is using the <%="<a>"%> tag</a> <br /> <br /> <i>This text is using an <%="<i>"%> tag</i> <br /> <br /> This <em>word</em> is using an <%="<em>"%> tag. <br /> <br /> <small>This text is using a <%="<small>"%> tag.</small> <br /> <br /> <u>This text is using a <%="<u>"%> tag.</u> <% end %>
Do not use positive and negative variants with each other. Use Pill Kit to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly.
Props | Type | Values |
---|---|---|
max_width |
array
|
xs
sm
md
lg
xl
0
none
|
z_index |
array
|
1
2
3
4
5
6
7
8
9
10
|
number_spacing |
array
|
tabular
|
shadow |
array
|
none
deep
deeper
deepest
|
line_height |
array
|
tightest
tighter
tight
normal
loose
looser
loosest
|
display |
array
|
block
inline_block
inline
flex
inline_flex
none
|
cursor |
array
|
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut
|
flex_direction |
array
|
row
column
rowReverse
columnReverse
|
flex_wrap |
array
|
wrap
nowrap
wrapReverse
|
justify_content |
array
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
justify_self |
array
|
auto
start
end
center
stretch
|
align_items |
array
|
flexStart
flexEnd
start
end
center
baseline
stretch
|
align_content |
array
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
align_self |
array
|
auto
start
end
center
stretch
baseline
|
flex |
array
|
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none
|
flex_grow |
array
|
1
0
|
flex_shrink |
array
|
1
0
|
order |
array
|
1
2
3
4
5
6
7
8
9
10
11
12
|
position |
array
|
relative
absolute
fixed
sticky
|
margin |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_bottom |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_left |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_right |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_top |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_x |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_y |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_bottom |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_left |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_right |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_top |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_x |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_y |
array
|
none
xxs
xs
sm
md
lg
xl
|
classname |
string
|
|
dark |
boolean
|
|
id |
string
|
|
data |
hash
|
|
aria |
hash
|
|
children |
proc
|
Props | Type | Values | Default |
---|---|---|---|
color |
enum
|
default
light
lighter
link
success
error
|
default
|
status |
enum
|
neutral
positive
negative
|
neutral
|
tag |
enum
|
h1
h2
h3
h4
h5
h6
p
span
div
|
div
|
text |
string
|
||
highlighting |
boolean
|
false
|
|
highlighted_text |
array
|