Bolt Design System

Opacity Usage

<bolt-text> can be adjusted in terms of opacity. The options are synced with Bolt's opacity scale.

This text has its opacity prop defined as: 100

<bolt-text opacity="100">
  This text has its opacity prop defined as: 100
</bolt-text>

This text has its opacity prop defined as: 80

<bolt-text opacity="80">
  This text has its opacity prop defined as: 80
</bolt-text>

This text has its opacity prop defined as: 60

<bolt-text opacity="60">
  This text has its opacity prop defined as: 60
</bolt-text>

This text has its opacity prop defined as: 40

<bolt-text opacity="40">
  This text has its opacity prop defined as: 40
</bolt-text>

This text has its opacity prop defined as: 20

<bolt-text opacity="20">
  This text has its opacity prop defined as: 20
</bolt-text>