diff --git a/packages/pancake-uikit/src/components/Card/CardRibbon.tsx b/packages/pancake-uikit/src/components/Card/CardRibbon.tsx
index f7eec83b6..109614b93 100644
--- a/packages/pancake-uikit/src/components/Card/CardRibbon.tsx
+++ b/packages/pancake-uikit/src/components/Card/CardRibbon.tsx
@@ -7,6 +7,7 @@ interface StyledCardRibbonProps extends CardRibbonProps {
 }
 
 const StyledCardRibbon = styled.div<Partial<StyledCardRibbonProps>>`
+  z-index: 1;
   background-color: ${({ variantColor = "secondary", theme }) => theme.colors[variantColor]};
   color: white;
   margin: 0;
@@ -51,9 +52,9 @@ const StyledCardRibbon = styled.div<Partial<StyledCardRibbonProps>>`
   }
 `;
 
-const CardRibbon: React.FC<CardRibbonProps> = ({ variantColor, text, ribbonPosition }) => {
+const CardRibbon: React.FC<CardRibbonProps> = ({ variantColor, text, ribbonPosition, ...props }) => {
   return (
-    <StyledCardRibbon variantColor={variantColor} ribbonPosition={ribbonPosition}>
+    <StyledCardRibbon variantColor={variantColor} ribbonPosition={ribbonPosition} {...props}>
       <div title={text}>{text}</div>
     </StyledCardRibbon>
   );
diff --git a/packages/pancake-uikit/src/components/Card/types.ts b/packages/pancake-uikit/src/components/Card/types.ts
index fd1e248cb..df09411c8 100644
--- a/packages/pancake-uikit/src/components/Card/types.ts
+++ b/packages/pancake-uikit/src/components/Card/types.ts
@@ -2,7 +2,7 @@ import { HTMLAttributes } from "react";
 import { SpaceProps } from "styled-system";
 import { Colors } from "../../theme/types";
 
-export interface CardRibbonProps {
+export interface CardRibbonProps extends SpaceProps, HTMLAttributes<HTMLDivElement> {
   variantColor?: keyof Colors;
   text: string;
   ribbonPosition?: "right" | "left";