docs(component-overview): example component overview icon on right

component-overview/examples/cards/IconCard-iconPosition.jsx

@@ -0,0 +1,20 @@
+import { IconCard } from '@sb1/ffe-cards-react';
+import { Icon } from '@sb1/ffe-icons-react';
+
+() => {
+    const savingsIconLarge =
+        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDAiPjxwYXRoIGQ9Ik0yNDQuNzctMTQwLjAwMXEtMjAuNzY5IDAtMzkuMDgzLTEzLjg2Mi0xOC4zMTQtMTMuODYxLTI0LjA3LTMzLjkwNy0yNS04Ny4xMjktNDAuNzg1LTE0Ny42MDEtMTUuNzg1LTYwLjQ3MS0yNC43OTQtMTA0LjI0OS05LjAxLTQzLjc3OC0xMi41MjMtNzYuNDUtMy41MTQtMzIuNjczLTMuNTE0LTY0LjA1IDAtODMuNDE4IDU4LjIzMS0xNDEuNjQ4IDU4LjIzLTU4LjIzMSAxNDEuNzY4LTU4LjIzMWgyMTAuMDAxcTI3LTM2IDY2LTU4IDM4Ljk5OS0yMiA4My45OTktMjIgMTYuNTM4IDAgMjguMjY4IDExLjczMSAxMS43MzEgMTEuNzMgMTEuNzMxIDI4LjI2OCAwIDQuMDc3LTEuMTE2IDcuOTYxLTEuMTE1IDMuODg1LTIuMzQ2IDcuNzMxLTQuMzg1IDExLjc2OS04LjQ2MSAyNS40NjItNC4wNzcgMTMuNjkyLTcuNjE2IDM0Ljc3bDEwNC4wNzggMTA0LjA3N2g0NC4xNzlxMTMuMzkxIDAgMjIuMzM2IDguOTQ2IDguOTQ2IDguOTQ1IDguOTQ2IDIyLjMzNnYxOTAuMTc4cTAgMTAuNTM0LTUuNzQxIDE4Ljc1NS01Ljc0MSA4LjIyMi0xNi4xODIgMTEuMzIxbC04Ny4xODIgMjguODkxLTUyLjMzMSAxNzQuNzI1cS02LjQyOCAyMC40Ni0yMi44MTkgMzIuNjUzLTE2LjM5MiAxMi4xOTMtMzcuNTQgMTIuMTkzaC03NS42MzlxLTI1LjcwNSAwLTQ0LjEzNC0xOC40My0xOC40My0xOC40MjktMTguNDMtNDQuMTM0di0xNy40MzZIMzc5Ljk5OXYxNy40MzZxMCAyNS43MDUtMTguNDMgNDQuMTM0LTE4LjQyOSAxOC40My00NC4xMzQgMTguNDNIMjQ0Ljc3Wm0tMS45NDktNTAuMjU1aDc0LjYxNHE1LjM4NSAwIDguODQ3LTMuNDYyIDMuNDYyLTMuNDYyIDMuNDYyLTguODQ3di02Ny42OTFoMjIwLjUxMnY2Ny42OTFxMCA1LjM4NSAzLjQ2MiA4Ljg0NyAzLjQ2MiAzLjQ2MiA4Ljg0NyAzLjQ2Mmg3NS42MzlxMy45NzUgMCA3LjI0NS0yLjMwOCAzLjI2OS0yLjMwOCA0LjY3OS02LjUzOWw1OS43MTgtMTk5LjA1MSA5OS44OTgtMzQuMDc3di0xNTcuNTEzaC00NS45NDlMNjI5Ljc0NC03MjMuNzk1cS40MS0xNy42MTUgNC4wNTEtNDAuMDI2IDMuNjQxLTIyLjQxIDEwLjUxMy00NS4zMzMtMzQuNjE2IDkuMTAzLTYyLjQ3NSAzMC43MTgtMjcuODU5IDIxLjYxNi00MS4xOTIgNDguNjkySDMwMHEtNjIuMjQyIDAtMTA1Ljk5MyA0My43NTFUMTUwLjI1Ni01ODBxMCA0MC44OTcgMjAuNzcgMTQwLjE0MSAyMC43NjkgOTkuMjQzIDU5LjEwMiAyMzkuOTg3IDEuMTU0IDQuMjMxIDQuODA4IDYuOTIzIDMuNjU0IDIuNjkzIDcuODg1IDIuNjkzWk02NDAtNTI0LjYxNnExNC42OTIgMCAyNS4wMzgtMTAuMzQ2VDY3NS4zODQtNTYwcTAtMTQuNjkyLTEwLjM0Ni0yNS4wMzhUNjQwLTU5NS4zODRxLTE0LjY5MiAwLTI1LjAzOCAxMC4zNDZUNjA0LjYxNi01NjBxMCAxNC42OTIgMTAuMzQ2IDI1LjAzOFQ2NDAtNTI0LjYxNlptLTE0NS4xMjctOTUuMTI4cTEwLjY5OCAwIDE3LjkxMi03LjI1UTUyMC02MzQuMjQzIDUyMC02NDQuOTkzdC03LjIxNS0xNy44NzhxLTcuMjE0LTcuMTI4LTE3LjkxMi03LjEyOEgzNDUuMTI3cS0xMC42OTggMC0xNy45MTIgNy4yNDktNy4yMTUgNy4yNS03LjIxNSAxOHQ3LjIxNSAxNy44NzhxNy4yMTQgNy4xMjggMTcuOTEyIDcuMTI4aDE0OS43NDZaTTQ4MC00OTkuODk3WiIvPjwvc3ZnPg==';
+    return (
+        <IconCard
+            icon={<Icon fileUrl={savingsIconLarge} size="lg" />}
+            iconPosition="right"
+        >
+            {({ Title, Subtext }) => (
+                <>
+                    <Title>Navigering</Title>
+                    <Subtext>7 004,00</Subtext>
+                </>
+            )}
+        </IconCard>
+    );
+};