diff --git a/component-overview/examples/cards/IllustrationCard-illustrationPositioned.jsx b/component-overview/examples/cards/IllustrationCard-illustrationPositioned.jsx
new file mode 100644
index 0000000000..9a58c86cf8
--- /dev/null
+++ b/component-overview/examples/cards/IllustrationCard-illustrationPositioned.jsx
@@ -0,0 +1,315 @@
+import { IllustrationCard } from '@sb1/ffe-cards-react';
+import React from 'react';
+
+() => {
+ const illustration = (
+
+ );
+
+ return (
+
+ {({ CardName, Title, Subtext, Text }) => (
+ <>
+ Kortnavn
+ Tittel
+ En liten undertekst
+ Her kan man ha tekst
+
+ )}
+
+ );
+};
diff --git a/packages/ffe-cards/less/icon-card.less b/packages/ffe-cards/less/icon-card.less
index 61e6c84775..868864ddb7 100644
--- a/packages/ffe-cards/less/icon-card.less
+++ b/packages/ffe-cards/less/icon-card.less
@@ -12,28 +12,21 @@
grid-template-columns: auto 1fr;
align-items: center;
padding: var(--ffe-spacing-md);
+ gap: var(--ffe-spacing-xs);
- & > &__icon {
- color: var(--ffe-v-cards-icon-color);
- margin: 0 var(--ffe-spacing-lg) 0 var(--ffe-spacing-xs);
- }
-
- &.ffe-icon-card--right {
- .ffe-icon-card__icon {
- justify-self: end;
- margin: 0 var(--ffe-spacing-xs) 0 var(--ffe-spacing-lg);
- }
+ &--right {
+ grid-template-columns: 1fr auto;
+ justify-content: space-between;
}
@media (min-width: @breakpoint-md) {
- .ffe-icon-card__icon {
- margin: 0 var(--ffe-spacing-md) 0;
+ gap: var(--ffe-spacing-md);
+ &--condensed {
+ gap: var(--ffe-spacing-xs);
}
}
-}
-.ffe-icon-card--condensed {
.ffe-icon-card__icon {
- margin: 0 var(--ffe-spacing-sm) 0 0;
+ color: var(--ffe-v-cards-icon-color);
}
}
diff --git a/packages/ffe-cards/less/illustration-card.less b/packages/ffe-cards/less/illustration-card.less
index 79532c290a..bb60f662a9 100644
--- a/packages/ffe-cards/less/illustration-card.less
+++ b/packages/ffe-cards/less/illustration-card.less
@@ -18,4 +18,9 @@
column-gap: var(--ffe-spacing-sm);
padding: var(--ffe-spacing-sm);
}
+
+ &--right {
+ grid-template-columns: 1fr auto;
+ justify-content: space-between;
+ }
}