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>