refactor: extract inline styles from CardTeaser into dedicated CSS file

Author: michaelmkraus

template/components/CardTeaser/CardTeaser.css

@@ -0,0 +1,37 @@
+.card-teaser {
+	flex: 1 1 calc(50% - var(--db-spacing-fixed-md));
+	min-inline-size: 280px;
+	text-decoration: none;
+	color: inherit;
+}
+
+.card-teaser-content {
+	display: flex;
+	align-items: center;
+	gap: var(--db-spacing-fixed-md);
+}
+
+.card-teaser-body {
+	flex: 1;
+}
+
+.card-teaser-title {
+	display: block;
+	margin-block-end: var(--db-spacing-fixed-xs);
+}
+
+.card-teaser-description {
+	color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+
+.card-teaser-label {
+	display: block;
+	margin-block-start: var(--db-spacing-fixed-sm);
+}
+
+.card-teaser-image {
+	block-size: 80px;
+	object-fit: contain;
+	opacity: 0.8;
+}
+

template/components/CardTeaser/CardTeaser.tsx

@@ -1,4 +1,5 @@
 import { DBCard } from '@db-ux/react-core-components';
+import './CardTeaser.css';
 
 export interface CardTeaserProps {
 	title: string;
@@ -23,33 +24,24 @@ const CardTeaser = ({
 		<a
 			href={url}
 			{...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-			style={{
-				flex: '1 1 calc(50% - var(--db-spacing-fixed-md))',
-				minInlineSize: '280px',
-				textDecoration: 'none',
-				color: 'inherit',
-			}}
+			className="card-teaser"
 		>
 			<DBCard behavior="interactive" spacing="medium">
-				<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--db-spacing-fixed-md)' }}>
-					<div style={{ flex: 1 }}>
-						<strong style={{ display: 'block', marginBlockEnd: 'var(--db-spacing-fixed-xs)' }}>
-							{title}
-						</strong>
-						<span style={{ color: 'var(--db-adaptive-on-bg-basic-emphasis-70-default)' }}>
-							{description}
-						</span>
+				<div className="card-teaser-content">
+					<div className="card-teaser-body">
+						<strong className="card-teaser-title">{title}</strong>
+						<span className="card-teaser-description">{description}</span>
 						<strong
+							className="card-teaser-label"
 							data-icon-trailing={external ? 'arrow_up_right' : 'arrow_right'}
-							style={{ display: 'block', marginBlockStart: 'var(--db-spacing-fixed-sm)' }}
 						>
 							{label}
 						</strong>
 					</div>
 					<img
 						src={image}
 						alt={imageAlt}
-						style={{ blockSize: '80px', objectFit: 'contain', opacity: 0.8 }}
+						className="card-teaser-image"
 						loading="lazy"
 					/>
 				</div>

template/components/CardTeaser/CardTeaserRow.css

@@ -4,10 +4,10 @@
 	gap: var(--db-spacing-fixed-md);
 }
 
-.card-teaser-row > a {
+.card-teaser-row > .card-teaser {
 	display: flex;
 }
 
-.card-teaser-row > a > .db-card {
+.card-teaser-row > .card-teaser > .db-card {
 	inline-size: 100%;
 }

template/styles/global.css

@@ -8,6 +8,7 @@
 @import url('./table.css');
 @import url('../components/GuidelineExample/GuidelineExample.css');
 @import url('../components/YourAction/YourAction.css');
+@import url('../components/CardTeaser/CardTeaser.css');
 @import url('../components/CardTeaser/CardTeaserRow.css');
 @import url('./db-ux-overrides.css');