# All files / src/Card Card.tsx

100% Statements 13/13
100% Branches 2/2
100% Functions 1/1
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    4550x
    50x

    50x

    50x

    236x

    236x

    236x

    50x
     import React from 'react'
    import { useDeprecation } from '../_hooks/Deprecation'
    import { DivAttributes } from '../_utils/types'
    import { StyledCardContainer } from './Card.styles'
    import { CardProps } from './Card.types'

    /**

     We use cards to display information that is grouped together.
     Cards may contain rich media, text, buttons, and other functionality.

     @since 10.19.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-card--demo)

     @see [Design Guidelines](https://design.procore.com/card)

     */
    export const Card = React.forwardRef<HTMLDivElement, DivAttributes & CardProps>(
      function Card(
        { children, level, shadowStrength = 1, variant, ...props },
        ref
      ) {
        useDeprecation({
          when: level,
          oldThing: 'level',
          newThing: 'shadowStrength',
        })

        return (
          <StyledCardContainer
            {...props}
            $level={level}
            $shadowStrength={shadowStrength}
            $variant={variant}
            ref={ref}
          >
            {children}
          </StyledCardContainer>
        )
      }
    )

    Card.displayName = 'Card'