VKCOM · BlackySoul · Aug 10, 2023 · Jul 27, 2023 · Aug 7, 2023
@@ -12,7 +12,7 @@ export const CardPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          mode: ['tint', 'shadow', 'outline'],
+          mode: ['tint', 'shadow', 'outline', 'outline-tint'],
         },
       ]}
     >

@@ -17,7 +17,7 @@
   background: var(--vkui--color_background_modal);
 }
 
-.Card--mode-outline::after {
+.Card--withBorder::after {
   position: absolute;
   left: 0;
   top: 0;

@@ -6,7 +6,7 @@ import styles from './Card.module.css';
 export interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
-  mode?: 'tint' | 'shadow' | 'outline';
+  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';
 }
 
 /**
@@ -19,6 +19,7 @@ export const Card = ({
   className,
   ...restProps
 }: CardProps) => {
+  const withBorder = mode === 'outline' || mode === 'outline-tint';
   return (
     <div
       {...restProps}
@@ -27,6 +28,7 @@ export const Card = ({
         styles['Card'],
         mode === 'outline' && styles['Card--mode-outline'],
         mode === 'shadow' && styles['Card--mode-shadow'],
+        withBorder && styles['Card--withBorder'],
         className,
       )}
     >

@@ -24,6 +24,16 @@
           </Card>
         </CardGrid>
       </Group>
+      <Group
+        mode="plain"
+        header={<Header mode="secondary">С внутренней обводкой и дефолтным фоном</Header>}
+      >
+        <CardGrid size="l">
+          <Card mode="outline-tint">
+            <div style={{ height: 96 }} />
+          </Card>
+        </CardGrid>
+      </Group>
     </Group>
   </Panel>
 </View>