Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Primary colors

These colors are the backbone of Bamburgh UI Kit PRO. If you want to modify them, you can easily to so by running the gulp tasks explained in the "Quick start" documentation page. You will need to edit dev-release/bamburgh-ui-kit-pro/src/scss/variables/_variables.scss with your own colors values.

To use them, add the CSS classes below to any of your HTML elements to add their respective background color.

bg-primary
bg-secondary
bg-first
bg-second
bg-success
bg-warning
bg-danger
bg-info
bg-light
bg-dark

Neutral colors

These colors are just like the primary ones, but with a lighter shade. Add neutral to the primary colors CSS classes. For example, neutral for bg-primary would be bg-neutral-primary

bg-neutral-primary
bg-neutral-first
bg-neutral-second
bg-neutral-success
bg-neutral-warning
bg-neutral-danger
bg-neutral-info
bg-neutral-dark

Gradients

To use them, add the CSS classes below to any of your HTML elements to add their respective background color.

Please note that they don't work for text colors or buttons.

bg-warm-flame
bg-night-fade
bg-tempting-azure
bg-sunny-morning
bg-heavy-rain
bg-amy-crisp
bg-malibu-beach
bg-mean-fruit
bg-ripe-malin
bg-deep-blue
bg-arielle-smile
bg-plum-plate
bg-happy-fisher
bg-happy-itmeo
bg-mixed-hopes
bg-strong-bliss
bg-grow-early
bg-premium-dark
bg-love-kiss
bg-happy-green
bg-vicious-stance
bg-night-sky
bg-midnight-bloom
bg-slick-carbon
bg-royal
bg-asteroid

Brands

These work for elements background colors and also for buttons. Combined with some Fontawesome icons, you'll have social buttons in no time.

bg-brand-facebook
bg-brand-twitter
bg-brand-google
bg-brand-instagram
bg-brand-pinterest
bg-brand-youtube
bg-brand-slack
bg-brand-dribbble
bg-brand-github

Composed backgrounds

You can combine multiple colors to create truly unique elements of style. Use the opacity CSS classes helpers (opacity-1 ... opacity-10) together with solid or gradient background colors. Add a sprinkle of background images (with or without opacity) and you'll have yourself an unique background for almost any HTML element.

Table of contents

This is a subheading example

bg-neutral-info bg-composed-img-1
Table of contents

This is a subheading example

bg-malibu-beach bg-composed-img-2
Table of contents

This is a subheading example

bg-danger bg-composed-img-3
Table of contents

This is a subheading example

bg-plum-plate bg-composed-img-5

Composed examples