Typography

Body

Default

I am a body kit

I am a body kit (Light)

I am a body kit (Lighter)

I am a body kit (Link)

I am a body kit (Error)

I am a body kit (Success)

Prop

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"
}) %>

Block

I am body kit

<%= pb_rails("body") do %>
  I am body kit
<% end %>

Best settings for articles

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 %>

Styled tags

This text is using the tag

This text is using the tag

This text is using the <a> tag

This text is using an tag

This word is using an tag.

This text is using a tag.

This text is using a tag.

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 %>

Truncate

After first row

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!

After second row

After third row

Prop

truncate | Type: String | Values: "1" | "2" | "3" | "4" | "5"

The truncate prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

<% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>

<%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
  <%= pb_rails("caption", props: { text: "After first row" }) %>
  <%= pb_rails("body", props: { text: lorem, truncate: "1", margin_bottom: "md" }) %>

  <%= pb_rails("caption", props: { text: "After second row" }) %>
  <%= pb_rails("body", props: { text: lorem, truncate: "2", margin_bottom: "md" }) %>

  <%= pb_rails("caption", props: { text: "After third row" }) %>
  <%= pb_rails("body", props: { text: lorem, truncate: "3" }) %>
<% end %>

Caption

Default

Caption

Caption Large

Subcaption

<%= pb_rails("caption", props: { text: "Caption" }) %>
<%= pb_rails("caption", props: { text: "Caption Large", size: 'lg' }) %>
<%= pb_rails("caption", props: { text: "Subcaption", size: 'xs' }) %>

Block

Large Block

Subcaption Block

<%= pb_rails("caption") do %>
  Block
<% end %>

<%= pb_rails("caption", props: { size: 'lg' }) do %>
  Large Block
<% end %>

<%= pb_rails("caption", props: { size: 'xs' }) do %>
  Subcaption Block
<% end %>

Colors

Test colors

Prop

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

<%= pb_rails("caption", props: { text: "Test colors" }) %>
<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>

Detail

Default

I am a detail kit

<%= pb_rails("detail", props: {
  text: "I am a detail kit"
}) %>

Colors

I am a detail kit

Prop

This kit uses the light color by default, and can be replaced with colors below:

default lighter link error success

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("detail", props: {
  text: "I am a detail kit",
  color: "default"
}) %>

<%= pb_rails("detail", props: {
  text: "I am a detail kit",
  color: "lighter"
}) %>

<%= pb_rails("detail", props: {
  text: "I am a detail kit",
  color: "link"
}) %>

<%= pb_rails("detail", props: {
  text: "I am a detail kit",
  color: "error"
}) %>

<%= pb_rails("detail", props: {
  text: "I am a detail kit",
  color: "success"
}) %>

Bold

I am a bold detail kit

Use the bold prop to strongly emphasis your text.

<%= pb_rails("detail", props: {
  bold: true,
  text: "I am a bold detail kit"
}) %>

<%= pb_rails("detail", props: {
  bold: true,
  color: "default",
  text: "I am a bold detail kit"
}) %>

<%= pb_rails("detail", props: {
  bold: true,
  color: "lighter",
  text: "I am a bold detail kit"
}) %>

<%= pb_rails("detail", props: {
  bold: true,
  color: "link",
  text: "I am a bold detail kit"
}) %>

<%= pb_rails("detail", props: {
  bold: true,
  color: "error",
  text: "I am a bold detail kit"
}) %>

<%= pb_rails("detail", props: {
  bold: true,
  color: "success",
  text: "I am a bold detail kit"
}) %>

Title

Default UI

Default Title

Title 1

Title 2

Title 3

Title 4

Prop

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: {
    margin_bottom: "md"
})  do %>
    Default Title
<% end %>

<%= 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 }) %>

Light Weight UI

Title 1

Title 2

Title 3

Prop

Title size 1, size 2, & size 3 will use font-weight: 700 by default, if you want a lighter font weight, use the bold prop set to false.
Title size 4 uses a heavy font weight by default and will not accept a lighter font weight.

<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>

Colors

Default Color

Title Color

Prop

Title kit will use default color by default. Other available colors are:

*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("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" }) %>

Responsive

Responsive Title

The size prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

<%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>

Truncate

After first row

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!

After second row

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!

After third row

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!

Prop

truncate | Type: String | Values: "1" | "2" | "3" | "4" | "5"

The truncate prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

<% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>

<%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
  <%= pb_rails("caption", props: { text: "After first row" }) %>
  <%= pb_rails("title", props: { text: lorem, truncate: "1", size: 4, margin_bottom: "md" }) %>

  <%= pb_rails("caption", props: { text: "After second row" }) %>
  <%= pb_rails("title", props: { text: lorem, truncate: "2", size: 4, margin_bottom: "md" }) %>

  <%= pb_rails("caption", props: { text: "After third row" }) %>
  <%= pb_rails("title", props: { text: lorem, truncate: "3", size: 4 }) %>
<% end %>

Display Size

Display Size xs

Display Size sm

Display Size md

Display Size lg

Display Size xl

Display Size xxl

This is a size of display

Responsive sizes for large screens and tablets, perfect for digital signage.

<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>

Link

Color

link example

<div>
  <%= pb_rails("link", props: {
    text: "link example",
    href: "https://www.google.com/search?q=playbook+design+system",
  }) %>
</div>

<div>
  <%= pb_rails("link", props: {
    text: "link example",
    href: "https://www.youtube.com/@PowerHRG",
    color: "body",
  }) %>
</div>

<div>
  <%= pb_rails("link", props: {
    text: "link example",
    href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
    color: "muted",
  }) %>
</div>

<div>
  <%= pb_rails("link", props: {
    text: "link example",
    href: "https://rubygems.org/gems/playbook_ui/",
    color: "destructive",
  }) %>
</div>

Underline

link example

<%= pb_rails("link", props: {
  text: "link example",
  href: "#underline",
  underline: true,
}) %>

Icon

link example

<div>
  <%= pb_rails("link", props: {
    text: "link example",
    href: "#icon",
    icon: "arrow-up-right-from-square",
  }) %>
</div>

<div>
  <%= pb_rails("link", props: {
    text: "link example",
    href: "#icon2",
    icon_right: "chevron-right",
  }) %>
</div>

Disabled

link example

<%= pb_rails("link", props: {
  text: "link example",
  href: "#disabled",
  disabled: true,
}) %>

Tag

h1 link example

h3 link example

h6 link example

p link example

This is a span link example

<%= pb_rails("link", props: {
  text: "h1 link example",
  href: "#tag",
  icon: "arrow-up-right-from-square",
  tag: "h1",
}) %>

<%= pb_rails("link", props: {
  text: "h3 link example",
  href: "#tag2",
  tag: "h3",
  underline: true,
}) %>

<%= pb_rails("link", props: {
  color: "destructive",
  text: "h6 link example",
  href: "#tag3",
  tag: "h6",
}) %>

<%= pb_rails("link", props: {
  text: "p link example",
  href: "#tag4",
  icon_right: "chevron-right",
  tag: "p",
}) %>

<div>
  This is a <%= pb_rails("link", props: {
    text: "span link example",
    href: "#tag5",
    tag: "span",
  }) %>
</div>

Target

Open In New Window

Open In Child Tab

<div>
  <%= pb_rails("link", props: {
    href: "http://google.com",
    target: "blank",
    text: "Open In New Window"
  }) %>
</div>

<div>
  <%= pb_rails("link", props: {
    href: "https://playbook.powerapp.cloud/",
    target: "child",
    text: "Open In Child Tab",
  }) %>
</div>

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat