<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm" }) do %> <%= pb_rails("body", props: { text: "Category 1", dark: true }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md" }) do %> Category 1 <% end %> <% end %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_3" }) do %> <%= pb_rails("body", props: { text: "Category 3", dark: false }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md", }) do %> Body <% end %> <% end %> <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_2_background" }) do %> <%= pb_rails("body", props: { text: "Product 2 Background", dark: true }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md" }) do %> Body <% end %> <% end %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_6_background" }) do %> <%= pb_rails("body", props: { text: "Product 6 Background", dark: true }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md" }) do %> Body <% end %> <% end %> <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %> <%= pb_rails("body", props: { text: "White", dark: false }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md" }) do %> Body <% end %> <% end %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %> <%= pb_rails("body", props: { text: "Dark", dark: true }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md" }) do %> Body <% end %> <% end %> <%= pb_rails("title", props: { text: "Striped Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_1", header_color_striped: true }) do %> <%= pb_rails("body", props: { text: "Striped Category 1", dark: true }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md", }) do %> Body <% end %> <% end %> <%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %> <%= pb_rails("body", props: { text: "Success", dark: true }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md" }) do %> Body <% end %> <% end %> <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %> <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %> <%= pb_rails("body", props: { text: "Error", dark: true }) %> <% end %> <%= pb_rails("card/card_body", props: { padding: "md" }) do %> Body <% end %> <% end %>