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>