Skip to main content

Styling Components

BAM web components support a number of CSS variables allowing partners to control the look and feel of the web components to better integrate into their sites.

As we build and upgrade our components, the list of -bam CSS variables will expand. Our styling tool always has the most recent and up-to-date version of CSS being used and is a great reference for your custom CSS needs.

You can control:

  • Colors
  • Spacing / Border radius
  • Font and font styles
  • Shadows
  • Other specific styling with certain components

Testing Tool / Sandbox​

We provide a tool to test and sandbox your CSS variables and see how these changes look with a number of example components.

-> Custom Styling Tool

Installation​

Ideally, you will want to add a <style>...</style> at the bottom of your <head> component on every page where BAM components exist. These -bam variables will override the default CSS variables.

Dark Mode​

BAM web components support "dark mode" where appropriate and will use a different set of CSS variables to take advantage of a dark or black background.

The "dark mode" variables all start with --bam-color-dark

To turn on "dark mode" for a component, add the attribute dark-mode="true" when adding the component to your page.