Strategy Diff Item

Use the Strategy Diff Item to illustrate a strategy change. Set a descriptive text for the title property and set the diff property to the type of change (plus, minus, up, down). Use the component’s slot for additional information as demonstrated in the example code.

'title' => 'Title',
'diff' => 'plus', // plus | minus | up | down
2 Anteile hinzugefügt 
<x-strategyDiffItem title="2 Anteile hinzugefügt" diff="plus" />
2 Anteile hinzugefügt
4 Anteile entfernt
Performancegebühr erhöht

von 2% auf 3%

Managementgebühr gesenkt

von 5% auf 3%

<x-strategyDiffItem title="2 Anteile hinzugefügt" diff="plus">
    <div class="flex gap-2 flex-wrap">
        <x-image class="size-[44px]" src="path/to/image" />
        <x-image class="size-[44px]" src="path/to/image" />
    </div>
</x-strategyDiffItem>
<x-strategyDiffItem title="4 Anteile entfernt" diff="minus">
    <div class="flex gap-2 flex-wrap">
        <x-image class="size-[44px]" src="path/to/image" />
        <x-image class="size-[44px]" src="path/to/image" />
        <x-image class="size-[44px]" src="path/to/image" />
        <x-image class="size-[44px]" src="path/to/image" />
    </div>
</x-strategyDiffItem>
<x-strategyDiffItem title="Performancegebühr erhöht" diff="up">
    <div class="flex gap-2">
        <p>von 2% auf 3%</p>
    </div>
</x-strategyDiffItem>
<x-strategyDiffItem title="Managementgebühr gesenkt" diff="down">
    <div class="flex gap-2">
        <p>von 5% auf 3%</p>
    </div>
</x-strategyDiffItem>