The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the background_color
prop to assign its color. The colors that you can choose from for the background_color
prop are: gradient, dark, light, white, status colors, product colors, and category colors.
The custom_color
prop allows you to pass a hex value (ex. "#e43718") in place of background_color
. It is not case sensitive, but needs to start with #
. This prop exists primarily for use in microsites and very specific situations. Avoid using unless absolutely necessary to maintain continuity.
<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %> <% end %>
<%= pb_rails("background", props: { background_color: "white", padding: "xl" }) do %> <% end %>
<%= pb_rails("background", props: { background_color: "gradient", padding: "xl" }) do %> <% end %>
To add a lazyload on the background image simply use the transition
prop and one of the three string options "fade"
, "blur"
, or "scale"
.
<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %> <%= pb_rails("flex", props: { horizontal: "center", orientation: "column", margin_bottom: "xl" }) do %> <%= pb_rails("flex/flex_item") do %> <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%> <% end %> <%= pb_rails("flex/flex_item", props: { padding: "lg" }) do %> <%= pb_rails("card", props: { shadow: "deepest" }) do %> We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. -Cesar Chavez <% end %> <% end %> <% end %> <% end %> <%= pb_rails("flex", props: { margin_top: "lg" }) do %> <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %> <%= pb_rails("select", props: { id: "transition-dropdown", label: "", blank_selection: "Select a Transition...", options: [ { value: 'fade', }, { value: 'blur', }, { value: 'scale', }, ] }) %> <% end %> <% end %> <script> window.addEventListener('DOMContentLoaded', () => { const transitionDropdown = document.querySelector("#transition-dropdown") var option = '' transitionDropdown.addEventListener('change', function() { if (this.value === '') { (transitionDropdown).className = (transitionDropdown).className + ' _disabled' } else { (transitionDropdown).removeAttribute("disabled"); (transitionDropdown).className = (transitionDropdown) option = this.value } }); const updateTransition = (transition) => { const imageTransition = document.querySelector('.background-image') imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded") imageTransition.classList.add(transition, "lazyload") } (transitionDropdown).addEventListener('change', function() { updateTransition(option) }) }); </script>
Status colors can be passed into the background kit. success
, success_secondary
, warning
, warning_secondary
, error
, error_secondary
, info
, info_secondary
, neutral
, neutral_secondary
, primary
, and primary_secondary
<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %> <%= pb_rails("background", props: { background_color: "success", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "success_secondary", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "warning", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "warning_secondary", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "error", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "error_secondary", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "info", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "info_secondary", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "neutral", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "neutral_secondary", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "primary", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "primary_secondary", padding: "xl" }) do %> <% end %> <%end%>
Status Subtle colors can be passed into the background kit. success_subtle
, warning_subtle
,error_subtle
, info_subtle
and neutral_subtle
<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %> <%= pb_rails("background", props: { background_color: "success_subtle", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "warning_subtle", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "error_subtle", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "info_subtle", padding: "xl" }) do %> <% end %> <br> <%= pb_rails("background", props: { background_color: "neutral_subtle", padding: "xl" }) do %> <% end %> <%end%>
Category colors can be passed into the background kit. Values category_1
to category_21
are accepted. List of all category and status colors can be viewed here.
<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %> <%= pb_rails("background", props: { background_color: "category_1", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_2", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_3", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_4", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_5", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_6", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_7", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_8", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_9", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_10", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_11", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_12", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_13", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_14", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_15", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_16", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_17", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_18", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_19", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_20", padding: "xl" }) do %> <% end %> <%= pb_rails("background", props: { background_color: "category_21", padding: "xl" }) do %> <% end %> <%end%>
Background size can be passed into the background kit. Values auto
, cover
, and contain
are accepted.
💡 Note: When using contain
you might not want to have a repeating background as this will not always look pleasant. To prevent this, you may pass no-repeat
to the backgroundRepeat
prop.
<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "auto", padding: "xl" }) %> <br/> <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "cover", padding: "xl" }) %> <br/> <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_repeat: "no-repeat", background_size: "contain", padding: "xl" }) %>