Bolt Design System

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.

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>