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 %>
Caption kit will use light
color by default. Other available colors are:
default
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
Title kit will use h3
tag by default, and size 3
as well.
Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.
<%= pb_rails("title", props: { }) do %> Default Title <% end %> <br/> <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %> <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %> <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %> <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
Title size 1
& size 2
will use font-weight: 700
by default, if you want a lighter font weight, use the bold
prop set to false
.
Title size 3
uses a light font weight by default and will not accept a bold font weight.
Title size 4
uses a heavy font weight by default and will not accept a lighter font weight.
Title kit will use default
color by default. Other available colors are:
*light
lighter
success
error
link
<%= pb_rails("title", props: { text: "Default Color", tag: "h1", size: 3 }) %> <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "link" }) %> <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "success" }) %> <%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "error" }) %>