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.
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" }) %>
Props | Type | Values |
---|---|---|
max_width |
array
|
0%
xs
sm
md
lg
xl
xxl
0
none
100%
|
min_width |
array
|
0%
xs
sm
md
lg
xl
xxl
0
none
100%
|
z_index |
array
|
1
2
3
4
5
6
7
8
9
10
|
number_spacing |
array
|
tabular
|
shadow |
array
|
none
deep
deeper
deepest
|
line_height |
array
|
tightest
tighter
tight
normal
loose
looser
loosest
|
display |
array
|
block
inline_block
inline
flex
inline_flex
none
|
cursor |
array
|
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut
|
flex_direction |
array
|
row
column
rowReverse
columnReverse
|
flex_wrap |
array
|
wrap
nowrap
wrapReverse
|
justify_content |
array
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
justify_self |
array
|
auto
start
end
center
stretch
|
align_items |
array
|
flexStart
flexEnd
start
end
center
baseline
stretch
|
align_content |
array
|
start
end
center
spaceBetween
spaceAround
spaceEvenly
|
align_self |
array
|
auto
start
end
center
stretch
baseline
|
flex |
array
|
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none
|
flex_grow |
array
|
1
0
|
flex_shrink |
array
|
1
0
|
order |
array
|
1
2
3
4
5
6
7
8
9
10
11
12
|
position |
array
|
relative
absolute
fixed
sticky
|
hover |
array
|
|
border_radius |
array
|
none
xs
sm
md
lg
xl
rounded
|
text_align |
array
|
start
end
left
right
center
justify
justify-all
match-parent
|
overflow |
array
|
visible
hidden
scroll
auto
|
truncate |
array
|
1
2
3
4
5
|
left |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
top |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
right |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
bottom |
array
|
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit
|
vertical_align |
array
|
baseline
super
top
middle
bottom
sub
text-top
text-bottom
|
overflow_x |
array
|
visible
hidden
scroll
auto
|
overflow_y |
array
|
visible
hidden
scroll
auto
|
margin |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_bottom |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_left |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_right |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_top |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_x |
array
|
none
xxs
xs
sm
md
lg
xl
|
margin_y |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_bottom |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_left |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_right |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_top |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_x |
array
|
none
xxs
xs
sm
md
lg
xl
|
padding_y |
array
|
none
xxs
xs
sm
md
lg
xl
|
classname |
string
|
|
dark |
boolean
|
|
group_hover |
boolean
|
|
id |
string
|
|
data |
hashprop
|
|
aria |
hashprop
|
|
html_options |
hashprop
|
|
children |
proc
|
|
style |
hashprop
|
|
height |
string
|
|
min_height |
string
|
|
max_height |
string
|
Props | Type | Values | Default |
---|---|---|---|
background_color |
enum
|
gradient
dark
light
white
success
warning
error
info
neutral
primary
shadow
category_1
category_2
category_3
category_4
category_5
category_6
category_7
category_8
category_9
category_10
category_11
category_12
category_13
category_14
category_15
category_16
category_17
category_18
category_19
category_20
category_21
success_secondary
error_secondary
info_secondary
warning_secondary
neutral_secondary
primary_secondary
text_lt_default
text_lt_light
text_lt_lighter
text_dk_default
text_dk_light
text_dk_lighter
card_light
card_dark
data_1
data_2
data_3
data_4
data_5
data_6
data_7
data_8
border_light
border_dark
success_subtle
warning_subtle
error_subtle
info_subtle
neutral_subtle
|
light
|
background_position |
string
|
||
background_repeat |
enum
|
repeat
repeat-x
repeat-y
no-repeat
space
round
initial
inherit
|
initial
|
background_size |
enum
|
contain
cover
auto
|
cover
|
image_url |
string
|
||
tag |
enum
|
h1
h2
h3
h4
h5
h6
p
div
span
tr
th
td
thead
col
|
div
|
transition |
enum
|
blur
fade
scale
|
|
custom_color |
string
|