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

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

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

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

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