Section with bg 'bokeh' fx

Content is vertically aligned center.

colour diagram

Data attributes:

data-bokeh-rgb="255,0,0" - sets the 'base' RGB colour for the bokeh particles.

data-colour-variance=".2" - value between 0 and 1, which sets how much of the rest of the colour-wheel is included in the random particle colours.

Modifier classes:

full-height - section fills 100% of the viewport and stretches to be deeper if necessary.

fixed-bg - background canvas is position-fixed, fills the viewport and does not scroll with the content.

Default content alignment

data-bokeh-rgb="214,73,35" data-colour-variance=".2"

This is a panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit.

With '.fixed-bg' class.

data-bokeh-rgb="255,255,0" data-colour-variance=".5"

This is a panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit.

With '.full-height' class.

data-bokeh-rgb="40,100,255" data-colour-variance=".3"

This is a panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit.

With '.full-height.fixed-bg' classes.

data-bokeh-rgb="240,100,50" data-colour-variance=".8"

This is a panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum nec mauris ornare suscipit.