diff --git a/src/generic/upsell-bullets/UpsellBullets.jsx b/src/generic/upsell-bullets/UpsellBullets.jsx
new file mode 100644
index 0000000000..e631ebae02
--- /dev/null
+++ b/src/generic/upsell-bullets/UpsellBullets.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+const CheckmarkBullet = () => (
+
+);
+
+// Must be child of a
+export const VerifiedCertBullet = () => {
+ const verifiedCertLink = (
+
+
+
+ );
+ return (
+ -
+
+
+
+ );
+};
+
+// Must be child of a
+export const UnlockGradedBullet = () => {
+ const gradedAssignmentsInBoldText = (
+
+
+
+ );
+ return (
+ -
+
+
+
+ );
+};
+
+// Must be child of a
+export const FullAccessBullet = () => {
+ const fullAccessInBoldText = (
+
+
+
+ );
+ return (
+ -
+
+
+
+ );
+};
+
+// Must be child of a
+export const SupportMissionBullet = () => {
+ const missionInBoldText = (
+
+
+
+ );
+ return (
+ -
+
+
+
+ );
+};
diff --git a/src/generic/upsell-bullets/UpsellBullets.scss b/src/generic/upsell-bullets/UpsellBullets.scss
new file mode 100644
index 0000000000..0cf75905b6
--- /dev/null
+++ b/src/generic/upsell-bullets/UpsellBullets.scss
@@ -0,0 +1,13 @@
+.upsell-bullet > .fa-li {
+ left: -31px;
+ padding-right: 22px;
+}
+
+.inline-link-underline {
+ text-decoration: underline;
+}
+
+.upsell-bullet a {
+ color: $primary-500;
+}
+
diff --git a/src/generic/upsell-bullets/UpsellBullets.test.jsx b/src/generic/upsell-bullets/UpsellBullets.test.jsx
new file mode 100644
index 0000000000..daf7494378
--- /dev/null
+++ b/src/generic/upsell-bullets/UpsellBullets.test.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+ initializeMockApp,
+ render,
+ screen,
+} from '../../setupTest';
+
+import {
+ VerifiedCertBullet,
+ UnlockGradedBullet,
+ FullAccessBullet,
+ SupportMissionBullet,
+} from './UpsellBullets';
+
+initializeMockApp();
+
+describe('UpsellBullets', () => {
+ const bullets = (
+ <>
+
+
+
+
+ >
+ );
+
+ it('upsell bullet text properly rendered', async () => {
+ render(bullets);
+ expect(screen.getByText(/Earn a.*?of completion to showcase on your resumé/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resumé');
+ expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
+ expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
+ expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our mission at edX');
+ });
+});