gradients

Background Gradient Utility Class

Add a background gradient to any container element (layout, teaser, div, etc.) by adding the u-bolt-bg-gradient utility class to it.
Important Notes: The color of the gradient applied by .u-bolt-bg-gradient will change depending on the theme. It is recommended (but not required) to add a theme class (t-bolt-*) to the same element as u-bolt-bg-gradient. All themes are supported, and an example is shown in the documentation for each theme. A few representative examples are below. Gradient backgrounds only work on container elements. Do not use this class on an element like a button.
Demo Navy Theme

This is a container with the .u-bolt-bg-gradient class and .t-bolt-navy theme class.

 Teal Theme

This is a container with the .u-bolt-bg-gradient class and .t-bolt-teal theme class.

 Yellow Theme

This is a container with the .u-bolt-bg-gradient class and .t-bolt-yellow theme class.
Twig
{% set layout_item %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: '<p>This is a layout item with a gradient background.</p>',
  } only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
  attributes: {
    class: [
      'u-bolt-bg-gradient',
      'u-bolt-padding-medium',
      't-bolt-navy',
    ],
  },
  content: layout_item,
} only %}
HTML
<bolt-layout class="u-bolt-bg-gradient u-bolt-padding-medium t-bolt-navy">
  <bolt-layout-item>
    This is a layout item with a gradient background.
  </bolt-layout-item>
</bolt-layout>

gradient focal points

Gradient Focal Points

You can optionally add a modifier class in the form u-bolt-bg-gradient--focus-[vertical]-[horizontal] to change the gradient focal point.
Important Notes: The .u-bolt-bg-gradient base class is required. The position of the focal point sets the lightest part in the background gradient.
Demo

Top Left

This container has the following modifier class:

.u-bolt-bg-gradient--focus-top-left

Top Center

This container has the following modifier class:

.u-bolt-bg-gradient--focus-top-center

Top Right

This container has the following modifier class:

.u-bolt-bg-gradient--focus-top-right

Center Left

This container has the following modifier class:

.u-bolt-bg-gradient--focus-center-left

Center Center

This container has the following modifier class:

.u-bolt-bg-gradient--focus-center-center

Center Right

This container has the following modifier class:

.u-bolt-bg-gradient--focus-center-right

Bottom Left

This container has the following modifier class:

.u-bolt-bg-gradient--focus-bottom-left

Bottom Center

This container has the following modifier class:

.u-bolt-bg-gradient--focus-bottom-center

Bottom Right (default)

This container has the following modifier class:

.u-bolt-bg-gradient--focus-bottom-right
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  attributes: {
    class: [
      'u-bolt-bg-gradient',
      'u-bolt-bg-gradient--focus-top-left',
      'u-bolt-padding-large',
      't-bolt-navy',
    ],
  },
  variant: 'card',
  headline: {
    text: 'Top Left Gradient Focal Point',
  },
} only %}
HTML
<div class="u-bolt-bg-gradient u-bolt-bg-gradient--focus-top-left t-bolt-navy u-bolt-padding-large">
  <h2>Top Left Gradient Focal Point</h2>
</div>

gradient tokens

Gradient Tokens You can set custom colors for the gradient by setting values for the custom variables --m-bolt-bg-highlight and --m-bolt-bg-lowlight.
Important Notes: It's recommended to set a theme class (t-bolt-*) on the same element as your custom colors. This theme will set the color of text, buttons, drop shadows, etc, so should be similar to the custom colors. Do not put an element with a theme class inside .
Demo

Custom Dark Gradient Colors

This element has the following style attribute:

--m-bolt-bg-highlight: var(--bolt-color-teal); --m-bolt-bg-lowlight: var(--bolt-color-navy-dark)

Custom Light Gradient Colors

This element has the following style attribute:

--m-bolt-bg-highlight: #FFFACD; --m-bolt-bg-lowlight: #AFEEEE;
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  attributes: {
    style: '--m-bolt-bg-highlight: var(--bolt-color-teal); --m-bolt-bg-lowlight: var(--bolt-color-navy-dark)',
    class: [
      'u-bolt-bg-gradient',
      'u-bolt-padding-xlarge',
      't-bolt-navy-light',
    ],
  },
  variant: 'card',
  headline: {
    text: 'Custom Gradient Colors',
  },
} only %}
HTML
<div class="u-bolt-bg-gradient t-bolt-navy-light u-bolt-padding-xlarge" style="--m-bolt-bg-highlight: var(--bolt-color-teal); --m-bolt-bg-lowlight: var(--bolt-color-navy-dark)">
  <h2>Custom Gradient Colors</h2>
</div>