diff --git a/src-ts/lib/index.ts b/src-ts/lib/index.ts
index 6ae9572e0..8d328ecc9 100644
--- a/src-ts/lib/index.ts
+++ b/src-ts/lib/index.ts
@@ -23,6 +23,7 @@ export {
     xhrPatchAsync,
     xhrPostAsync,
 } from './functions'
+export * from './info-card'
 export * from './loading-spinner'
 export * from './modals'
 export * from './page-footer'
diff --git a/src-ts/lib/info-card/InfoCard.module.scss b/src-ts/lib/info-card/InfoCard.module.scss
new file mode 100644
index 000000000..dc9a3a5a6
--- /dev/null
+++ b/src-ts/lib/info-card/InfoCard.module.scss
@@ -0,0 +1,61 @@
+@import '../styles/includes';
+
+.card {
+    width: 100%;
+    margin-top: 32px;
+    padding: 16px;
+
+    &.collapsible {
+        border-radius: 4px;
+    }
+
+    &.notCollapsible {
+        border-radius: 8px;
+    }
+
+    .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &.collapsible {
+            cursor: pointer;
+        }
+
+        span {
+            @include font-black-100;
+            font-size: 18px;
+            line-height: 22px;
+            text-transform: uppercase;
+            font-weight: 600;
+        }
+
+        .arrowIcon {
+
+            &.up {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .spacing {
+        padding-bottom: 17px;
+    }
+
+    .content {
+        @include font-black-100;
+        @include font-roboto;
+    }
+}
+
+.info {
+    background-color: $black-5;
+}
+
+.success {
+    background-color: $turq-15;
+}
+
+.warn {
+    background-color: $orange-25;
+}
\ No newline at end of file
diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src-ts/lib/info-card/InfoCard.tsx
new file mode 100644
index 000000000..2c57f9b2c
--- /dev/null
+++ b/src-ts/lib/info-card/InfoCard.tsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames'
+import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
+
+import { ArrowIcon } from '../svgs'
+
+import styles from './InfoCard.module.scss'
+
+interface InfoCardProps {
+    children: ReactNode,
+    color: 'info' | 'success' | 'warn',
+    defaultOpen: boolean,
+    isCollapsible: boolean,
+    title?: string,
+}
+
+const InfoCard: FC<InfoCardProps> = ({
+    children,
+    color = 'info',
+    defaultOpen = true,
+    isCollapsible = false,
+    title,
+}: InfoCardProps) => {
+
+    const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(defaultOpen)
+    const collapsibleClass: string = isCollapsible ? styles.collapsible : styles.notCollapsible
+    const showSpacing: boolean = isOpen && !!title && !!children
+
+    return (
+        <div className={classNames(styles.card, styles[color], collapsibleClass)}>
+            {renderHeader(isCollapsible, isOpen, setIsOpen, title || '')}
+
+            {showSpacing && (
+                <div className={styles.spacing}></div>
+            )}
+
+            {isOpen &&
+                <div className={styles.content}>{children}</div>
+            }
+        </div>
+    )
+}
+
+function renderHeader(
+    isCollapsible: boolean,
+    isOpen: boolean,
+    setIsOpen: Dispatch<SetStateAction<boolean>>,
+    title: string
+): JSX.Element {
+
+    const arrowClass: string = isOpen ? styles.up : undefined
+
+    if (isCollapsible) {
+        return (
+            <div
+                className={classNames(styles.title, styles.collapsible)}
+                onClick={() => setIsOpen(!isOpen)}
+                role='button'
+                tabIndex={0}
+            >
+                <span>{title}</span>
+
+                <div className={classNames(styles.arrowIcon, arrowClass)}>
+                    <ArrowIcon />
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles.title}>
+            <span>{title}</span>
+        </div>
+    )
+}
+
+export default InfoCard
diff --git a/src-ts/lib/info-card/index.ts b/src-ts/lib/info-card/index.ts
new file mode 100644
index 000000000..113beef4a
--- /dev/null
+++ b/src-ts/lib/info-card/index.ts
@@ -0,0 +1 @@
+export { default as InfoCard } from './InfoCard'
diff --git a/src-ts/lib/svgs/icon-arrow.svg b/src-ts/lib/svgs/icon-arrow.svg
new file mode 100644
index 000000000..f7122f3e4
--- /dev/null
+++ b/src-ts/lib/svgs/icon-arrow.svg
@@ -0,0 +1 @@
+<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-tj5bde-Svg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>
\ No newline at end of file
diff --git a/src-ts/lib/svgs/index.ts b/src-ts/lib/svgs/index.ts
index 6a5e5da55..e8fbd2a9e 100644
--- a/src-ts/lib/svgs/index.ts
+++ b/src-ts/lib/svgs/index.ts
@@ -3,6 +3,7 @@ import * as IconOutline from '@heroicons/react/outline'
 import * as IconSolid from '@heroicons/react/solid'
 
 import { ReactComponent as ActiveTabTipIcon } from './activetab-tip-icon.svg'
+import { ReactComponent as ArrowIcon } from './icon-arrow.svg'
 import { ReactComponent as LogoIcon } from './logo.svg'
 import { ReactComponent as SocialIconFacebook } from './social-fb-icon.svg'
 import { ReactComponent as SocialIconInstagram } from './social-insta-icon.svg'
@@ -12,6 +13,7 @@ import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg'
 import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg'
 
 export { ActiveTabTipIcon }
+export { ArrowIcon }
 export { IconOutline }
 export { IconSolid }
 export { LogoIcon }