G
Tokens
TypographySpacingColorRadiusShadowMotion
Patterns
CardsModals

Card

Content


    () => (
      <Stack gap="m">
        <Card
          maxWidth={50}
          borderSide="all"
        >
          {demoText.m}
        </Card>
        <Card
          borderSide="all"
        >
          {demoText.xl}
        </Card>
      </Stack>
    )

Nested


    <Card
      borderSide="all"
      maxWidth={30}
      padding={0}
      overflow="hidden"
    >      
      <DemoImage aspectRatio="4/3"/>
      <Card>
        {demoText.s}
      </Card>
    </Card>
  

With Arrange and Flex

Arrange


    () => (
      <Arrange 
        gap="m" 
        columns="repeat(auto-fit, minmax(360px, 1fr))"
      >
        <Card borderSide="all">
          {demoText.m}
        </Card>
        <Card borderSide="all">
          {demoText.m}
        </Card>
      </Arrange>
    )

Flex


    () => (
      <Flex gap="m">
        <Card flex="1 0 360px" borderSide="all">
          {demoText.m}
        </Card>
        <Card flex="1 0 360px" borderSide="all">
          {demoText.m}
        </Card>
      </Flex>
    )

Props

Name
Type
Default
paddingRESPONSIVE
oneOfType
oneOf
"xs" "s" "s2" "m" "l" "l2" "xl" "xl2" "xxl"
number
string
object
'var(--grn-card-padding)'
radius
oneOfType
oneOf
"xs" "s" "m" "l"
string
number
'var(--grn-card-radius)'
shadow
oneOfType
oneOf
"s" "m" "l"
string
's'
widthRESPONSIVE
oneOfType
number
string
object
minWidthRESPONSIVE
oneOfType
number
string
object
maxWidthRESPONSIVE
oneOfType
number
string
object
heightRESPONSIVE
oneOfType
number
string
object
minHeightRESPONSIVE
oneOfType
number
string
object
maxHeightRESPONSIVE
oneOfType
number
string
object
position
oneOf
'static' 'relative' 'fixed' 'absolute' 'sticky'
zIndex
oneOfType
number
string
flexRESPONSIVE
oneOfType
string
object
shadowHover
oneOfType
oneOf
"s" "m" "l"
string
borderColor
oneOfType
Object.keys(vars.colors)
string
borderColorHover
oneOfType
Object.keys(vars.colors)
string
borderWidth
oneOf
'1px' '2px' '3px' '4px'
borderSide
oneOf
'all' 'left' 'right' 'top' 'bottom' 'x' 'y'
backgroundColor
oneOfType
Object.keys(vars.colors)
string
backgroundColorHover
oneOfType
Object.keys(vars.colors)
string
transition
oneOfType
oneOf
"slow" "fast" "xFast" "xxFast"
string
transitionHover
oneOfType
oneOf
"slow" "fast" "xFast" "xxFast"
string
cursor
oneOf
'default' 'pointer'