Spectrum

Render a spectrum bar with optional label and chose from different layouts via the layout property. Set the marker via the position property to a value between 1 (leftmost) and 7 (rightmost). The left side of the spectrum is semantically colored as positive (or light) while the right side represents negative (or intense). Provide any custom markup as label via the component slot.

'position' => 1, // 1 - 7
'layout' => 'col', // col | col-reverse | row | row-reverse
<x-spectrum position="2" />
<x-spectrum position="4" />
<x-spectrum position="6" />

Sicherheitsorientiert

Solide ertragsorientiert

Wachstumsorientiert/spekulativ

Spekulativ Mehr erfahren 
<x-spectrum position="2" layout="row">
    <p>Sicherheitsorientiert</p>
</x-spectrum>

<x-spectrum position="4" layout="row-reverse">
    <p>Solide ertragsorientiert</p>
</x-spectrum>

<x-spectrum position="6">
    <p>Wachstumsorientiert/spekulativ</p>
</x-spectrum>

<x-spectrum position="7" layout="col-reverse">
    <div class="flex gap-4 justify-center">
        <span>Spekulativ</span>
        <x-anchor href="#" class="text-text-subtle" icon-left="tabler-info-triangle" invert>Mehr erfahren</x-anchor>
    </div>
</x-spectrum>