diff --git a/jest.setup.js b/jest.setup.js
index e69de29bb..c44951a68 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
new file mode 100644
index 000000000..59560714d
--- /dev/null
+++ b/src/components/Card/Card.module.scss
@@ -0,0 +1,43 @@
+.root {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.oneOne {
+  padding-bottom: 100%;
+}
+
+.twoOne {
+  padding-bottom: 50%;
+}
+
+.twoThree {
+  padding-bottom: (3 / 2) * 100%;
+}
+
+.fiveThree {
+  padding-bottom: 60%;
+}
+
+.fourThree {
+  padding-bottom: 75%;
+}
+
+.sixteenNine {
+  padding-bottom: (9 / 16) * 100%;
+}
+
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--card-slider-loading-card-bg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+}
+
diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
new file mode 100644
index 000000000..2578f01a2
--- /dev/null
+++ b/src/components/Card/Card.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import Card from './Card';
+
+describe('<Card>', () => {
+  it('renders card', () => {
+    const { getByText } = render(<Card title="aa" duration={120} />);
+    const card = getByText(/card/i);
+    expect(card).toBeTruthy();
+  });
+});
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
new file mode 100644
index 000000000..ddf96dbda
--- /dev/null
+++ b/src/components/Card/Card.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { ASPECT_RATIO } from '../../enum/Card.js'
+
+import styles from './Card.module.scss';
+
+type CardProps = {
+  title: string;
+  duration: number;
+  imageSource?: string;
+  aspectRatio?: string;
+};
+
+function Card({
+  title,
+  duration,
+  imageSource,
+  aspectRatio = ASPECT_RATIO[16_9],
+}: CardProps): JSX.Element {
+  return (
+    <div className={classNames(styles.root, styles[aspectRatio])}>
+      <div className={styles.container} style={{ backgroundImage: `url(${imageSource})` }}>
+        <span>Card</span>
+      </div>
+    </div >
+  );
+}
+
+export default Card;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 30bb6e355..c154737aa 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,8 +2,8 @@
 
 :root {
   --primary-color: #{theme.$primary-color};
-
   --body-background-color: #{theme.$body-bg-color};
+  --card-slider-loading-card-bg: #{theme.$card-slider-loading-card-bg};
 }
 
 body {