V99ShadowCard

A Card component. Elevation can be described using shadows or other visual cues, such as surface fill or opacity.

I. Props

Name	Type	Default	Description
children	React.ReactNode	-	Add children for Card
borderRadius	number	-	Set border radius for Card
S1	boolean	true	Shadow 1, x:0px, y:1px, blur:3px, alpha:15%
S2	boolean	-	Shadow 2, x:0px, y:2px, blur:6px, alpha:15%
S3	boolean	-	Shadow 3, x:0px, y:4px, blur:8px, alpha:15%
S4	boolean	-	Shadow 4, x:0px, y:6px, blur:10px, alpha:15%
S5	boolean	-	Shadow 5, x:0px, y:8px, blur:12px, alpha:15%

II. Usage

import { V99ShadowCard } from 'v99-kits'

Example

<V99ShadowCard borderRadius={16} padding={16} backgroundColor={V99Colors.background500} S1>
  <V99Box row>
    <V99Box flex={1}>
      <V99Text color={V99Colors.background100} H2>X:</V99Text>
    </V99Box>
    <V99Box flex={3}>
      <V99Text color={V99Colors.background900} H2>0 px</V99Text>
    </V99Box>
  </V99Box>
  <V99Box row marginTop={V99Spacing.S}>
    <V99Box flex={1}>
      <V99Text color={V99Colors.background100} H2>Y:</V99Text>
    </V99Box>
    <V99Box flex={3}>
      <V99Text color={V99Colors.background900} H2>1 px</V99Text>
    </V99Box>
  </V99Box>
  <V99Box row marginTop={V99Spacing.S}>
    <V99Box flex={1}>
      <V99Text color={V99Colors.background100} H2>Blur:</V99Text>
    </V99Box>
    <V99Box flex={3}>
      <V99Text color={V99Colors.background900} H2>3 px</V99Text>
    </V99Box>
  </V99Box>
  <V99Box row marginTop={V99Spacing.S}>
    <V99Box flex={1}>
      <V99Text color={V99Colors.background100} H2>Alpha:</V99Text>
    </V99Box>
    <V99Box flex={3}>
      <V99Text color={V99Colors.background900} H2>15%</V99Text>
    </V99Box>
  </V99Box>
  <V99Box row marginTop={V99Spacing.S}>
    <V99Box flex={1}>
      <V99Text color={V99Colors.background100} H2>Color:</V99Text>
    </V99Box>
    <V99Box flex={3}>
      <V99Text color={V99Colors.background900} H2>#000000</V99Text>
    </V99Box>
  </V99Box>
</V99ShadowCard>

Demo