Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
Tags can be changed using the tag prop. However, be sure follow markdown semantics (h1's are followed by h2's followed by h3's and so on).
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 4", tag: "h4", size: 4 }) %> <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %> <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %> <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
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" }) %>