diff --git a/src/App/ComponentsDocumentation/components/Card/index.js b/src/App/ComponentsDocumentation/components/Card/index.js
index 5009282d1d..9422f5339a 100644
--- a/src/App/ComponentsDocumentation/components/Card/index.js
+++ b/src/App/ComponentsDocumentation/components/Card/index.js
@@ -21,137 +21,137 @@ const basename = process.env.basename;
 const brand = process.env.brand;
 
 const Overview = () => {
-    console.log("Brand:", brand); // Log the brand variable
+	console.log("Brand:", brand); // Log the brand variable
 
-    return (
-        <>
-            <h2 id="overview">Overview</h2>
-            <p>
-                The card component should be used to direct to pages on our site and not
-                to external sites, in that case use{" "}
-                <Link to="/components/links">Links</Link> instead.
-            </p>
-            <ComponentPreview
-                language="html"
-                showCasePanel
-                showCasePanelAdvanced={overviewCards}
-                codeFigure
-            />
+	return (
+		<>
+			<h2 id="overview">Overview</h2>
+			<p>
+				The card component should be used to direct to pages on our site and not
+				to external sites, in that case use{" "}
+				<Link to="/components/links">Links</Link> instead.
+			</p>
+			<ComponentPreview
+				language="html"
+				showCasePanel
+				showCasePanelAdvanced={overviewCards}
+				codeFigure
+			/>
 
-            <h3>{"Dos and dont's"}</h3>
-            {brand === "swedbankpay" && (
-                <div className="row">
-                    <div className="col-xl-6 mb-4">
-                        <div className="slab slab-plain slab-border-success h-100">
-                            <h4>Do</h4>
-                            When presenting a group of cards, make sure their color match and have
-                            the same size and text length
-                            <img
-                                alt="Three cards in a horizontal line that all have the same icon color and text length."
-                                src={`${basename}img/documentation/cards/do-cards.png`}
-                                className="w-100 mt-4 mb-4"
-                            />
-                        </div>
-                    </div>
-                    <div className="col-xl-6 mb-4">
-                        <div className="slab slab-plain slab-border-error h-100">
-                            <h4>{"Don't"}</h4>
-                            Avoid miss-match colors, different sizes and length on text in order
-                            to present a clean view
-                            <img
-                                alt="Three cards in a horizontal line that have different icon colors and text lengths."
-                                src={`${basename}img/documentation/cards/dont-cards.png`}
-                                className="w-100 mt-4 mb-4"
-                            />
-                        </div>
-                    </div>
+			<h3>{"Dos and dont's"}</h3>
+			{brand === "swedbankpay" && (
+				<div className="row">
+					<div className="col-xl-6 mb-4">
+						<div className="slab slab-plain slab-border-success h-100">
+							<h4>Do</h4>
+							When presenting a group of cards, make sure their color match and have
+							the same size and text length
+							<img
+								alt="Three cards in a horizontal line that all have the same icon color and text length."
+								src={`${basename}img/documentation/cards/do-cards.png`}
+								className="w-100 mt-4 mb-4"
+							/>
+						</div>
+					</div>
+					<div className="col-xl-6 mb-4">
+						<div className="slab slab-plain slab-border-error h-100">
+							<h4>{"Don't"}</h4>
+							Avoid miss-match colors, different sizes and length on text in order
+							to present a clean view
+							<img
+								alt="Three cards in a horizontal line that have different icon colors and text lengths."
+								src={`${basename}img/documentation/cards/dont-cards.png`}
+								className="w-100 mt-4 mb-4"
+							/>
+						</div>
+					</div>
 					<div className="row">
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-success h-100">
-					<h4>Do</h4>
-					When presenting a group of cards, make sure they match visually. Try
-					keeping it the same text length and to one row when possible.
-					<img
-						alt="Three wide cards in a vertical line that have the same icon color and text length."
-						src={`${basename}img/documentation/cards/do-wide-cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
-				</div>
-			</div>
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-error h-100">
-					<h4>{"Don't"}</h4>
-					Avoid miss-match colors, different sizes and length on text in order
-					to present a clean view. When using numbers make sure the numbering is
-					sequenced and follows the correct order.
-					<img
-						alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
-						src={`${basename}img/documentation/cards/dont-wide-cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
+						<div className="col-xl-6 mb-4">
+							<div className="slab slab-plain slab-border-success h-100">
+								<h4>Do</h4>
+								When presenting a group of cards, make sure they match visually. Try
+								keeping it the same text length and to one row when possible.
+								<img
+									alt="Three wide cards in a vertical line that have the same icon color and text length."
+									src={`${basename}img/documentation/cards/do-wide-cards.png`}
+									className="w-100 mt-4 mb-4"
+								/>
+							</div>
+						</div>
+						<div className="col-xl-6 mb-4">
+							<div className="slab slab-plain slab-border-error h-100">
+								<h4>{"Don't"}</h4>
+								Avoid miss-match colors, different sizes and length on text in order
+								to present a clean view. When using numbers make sure the numbering is
+								sequenced and follows the correct order.
+								<img
+									alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
+									src={`${basename}img/documentation/cards/dont-wide-cards.png`}
+									className="w-100 mt-4 mb-4"
+								/>
+							</div>
+						</div>
+					</div>
 				</div>
-			</div>
-		</div>
-                </div>
-				
-            )}
-            {brand === "payex" && (
-                <div className="row">
-                    <div className="col-xl-6 mb-4">
-                        <div className="slab slab-plain slab-border-success h-100">
-                            <h4>Do</h4>
-                            When presenting a group of cards, make sure their color match and have
-                            the same size and text length
-                            <img
-                                alt="Three cards in a horizontal line that all have the same icon color and text length."
-                                src={`${basename}img/payex/documentation/cards/do-cards.png`}
-                                className="w-100 mt-4 mb-4"
-                            />
-                        </div>
-                    </div>
-                    <div className="col-xl-6 mb-4">
-                        <div className="slab slab-plain slab-border-error h-100">
-                            <h4>{"Don't"}</h4>
-                            Avoid miss-match colors, different sizes and length on text in order
-                            to present a clean view
-                            <img
-                                alt="Three cards in a horizontal line that have different icon colors and text lengths."
-                                src={`${basename}img/payex/documentation/cards/dont-cards.png`}
-                                className="w-100 mt-4 mb-4"
-                            />
-                        </div>
-                    </div>
+
+			)}
+			{brand === "payex" && (
+				<div className="row">
+					<div className="col-xl-6 mb-4">
+						<div className="slab slab-plain slab-border-success h-100">
+							<h4>Do</h4>
+							When presenting a group of cards, make sure their color match and have
+							the same size and text length
+							<img
+								alt="Three cards in a horizontal line that all have the same icon color and text length."
+								src={`${basename}img/documentation/cards/Do-Cards.png`}
+								className="w-100 mt-4 mb-4"
+							/>
+						</div>
+					</div>
+					<div className="col-xl-6 mb-4">
+						<div className="slab slab-plain slab-border-error h-100">
+							<h4>{"Don't"}</h4>
+							Avoid miss-match colors, different sizes and length on text in order
+							to present a clean view
+							<img
+								alt="Three cards in a horizontal line that have different icon colors and text lengths."
+								src={`${basename}img/payex/documentation/cards/dont-cards.png`}
+								className="w-100 mt-4 mb-4"
+							/>
+						</div>
+					</div>
 					<div className="row">
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-success h-100">
-					<h4>Do</h4>
-					When presenting a group of cards, make sure they match visually. Try
-					keeping it the same text length and to one row when possible.
-					<img
-						alt="Three wide cards in a vertical line that have the same icon color and text length."
-						src={`${basename}img/payex/documentation/cards/do-wide-cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
-				</div>
-			</div>
-			<div className="col-xl-6 mb-4">
-				<div className="slab slab-plain slab-border-error h-100">
-					<h4>{"Don't"}</h4>
-					Avoid miss-match colors, different sizes and length on text in order
-					to present a clean view. When using numbers make sure the numbering is
-					sequenced and follows the correct order.
-					<img
-						alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
-						src={`${basename}img/payex/documentation/cards/dont-wide-cards.png`}
-						className="w-100 mt-4 mb-4"
-					/>
+						<div className="col-xl-6 mb-4">
+							<div className="slab slab-plain slab-border-success h-100">
+								<h4>Do</h4>
+								When presenting a group of cards, make sure they match visually. Try
+								keeping it the same text length and to one row when possible.
+								<img
+									alt="Three wide cards in a vertical line that have the same icon color and text length."
+									src={`${basename}img/payex/documentation/cards/do-wide-cards.png`}
+									className="w-100 mt-4 mb-4"
+								/>
+							</div>
+						</div>
+						<div className="col-xl-6 mb-4">
+							<div className="slab slab-plain slab-border-error h-100">
+								<h4>{"Don't"}</h4>
+								Avoid miss-match colors, different sizes and length on text in order
+								to present a clean view. When using numbers make sure the numbering is
+								sequenced and follows the correct order.
+								<img
+									alt="Three wide cards in a vertical line that have inconsistent iconography, different colors and varied text lengths."
+									src={`${basename}img/payex/documentation/cards/dont-wide-cards.png`}
+									className="w-100 mt-4 mb-4"
+								/>
+							</div>
+						</div>
+					</div>
 				</div>
-			</div>
-		</div>
-                </div>
-            )}
-        </>
-    );
+			)}
+		</>
+	);
 };
 
 // TODO: remove during next major release, not offered for a long time now