Shape Theming A Shape can accept all existing themes. Important Notes: Pass a .t-bolt-* theme class to the parent element to color a shape. Reference the Theming System for all available themes. Demo
Light
  • .t-bolt-white
  • .t-bolt-black
  • .t-bolt-gray-xlight
  • .t-bolt-navy-dark
  • .t-bolt-navy
  • .t-bolt-navy-light
  • .t-bolt-teal
  • .t-bolt-yellow
  • .t-bolt-orange
  • .t-bolt-pink
  • .t-bolt-wine
  • .t-bolt-berry
  • .t-bolt-violet
Dark
  • .t-bolt-white
  • .t-bolt-black
  • .t-bolt-gray-xlight
  • .t-bolt-navy-dark
  • .t-bolt-navy
  • .t-bolt-navy-light
  • .t-bolt-teal
  • .t-bolt-yellow
  • .t-bolt-orange
  • .t-bolt-pink
  • .t-bolt-wine
  • .t-bolt-berry
  • .t-bolt-violet
Twig
{% include '@bolt-elements-shape/shape.twig' with {
  attributes: {
    class: 't-bolt-navy',
  }
  ...
} only %}
HTML
<span class="e-bolt-shape t-bolt-navy">
  <span class="t-bolt-shape__content">
    <!-- Letters, icon, or image go here -->
  </span>
</span>