
<ThemeProvider colorMode="light">
  <View backgroundColor="neutral-faded" padding={8} borderRadius="large" width="300px">
    <Card elevated>
      <View gap={2} direction="row" align="center">
        <Avatar initials="A" color="primary" />
        <View.Item grow>
          <Text variant="body-strong-2">UIC</Text>
          <Text color="neutral-faded">10,873 followers</Text>
        </View.Item>
      </View>
    </Card>
  </View>
</ThemeProvider>

UIC supports two shadow tokens that demonstrate the level of elevation of the component.

--uic-shadow-base
--uic-shadow-elevated

/* Usage */
.element {
  box-shadow: var(--uic-shadow-base);
}

Base shadow is used to elevate the elements that initially don't have any elevation, for example, in elevated Card. Elevated shadow is used for elements that are displayed on top of other elements, like in DropdownMenu.

Shadows are usually used with base and elevated background color tokens: --uic-color-background-base and --uic-color-background-elevated. Since shadows are less prominent in dark mode, these color tokens will adjust the element's background color to communicate the elevation to the user.


<View direction="row" gap={4}>
  <ThemeProvider colorMode="light">
    <View backgroundColor="neutral-faded" padding={8} borderRadius="large" direction="row" gap={3}>
      <div
        style={{
          backgroundColor: "var(--uic-color-background-base)",
          border: "1px solid var(--uic-color-border-neutral-faded)",
          borderRadius: "var(--uic-unit-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--uic-shadow-base)",
        }}
      />
      <div
        style={{
          backgroundColor: "var(--uic-color-background-elevated)",
          border: "1px solid var(--uic-color-border-neutral-faded)",
          borderRadius: "var(--uic-unit-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--uic-shadow-elevated)",
        }}
      />
    </View>
  </ThemeProvider>
  <ThemeProvider colorMode="dark">
    <View backgroundColor="neutral-faded" padding={8} borderRadius="large" direction="row" gap={3}>
      <div
        style={{
          backgroundColor: "var(--uic-color-background-base)",
          border: "1px solid var(--uic-color-border-neutral-faded)",
          borderRadius: "var(--uic-unit-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--uic-shadow-base)",
        }}
      />
      <div
        style={{
          backgroundColor: "var(--uic-color-background-elevated)",
          border: "1px solid var(--uic-color-border-neutral-faded)",
          borderRadius: "var(--uic-unit-radius-medium)",
          width: 80,
          height: 80,
          boxShadow: "var(--uic-shadow-elevated)",
        }}
      />
    </View>
  </ThemeProvider>
</View>

Radius

Viewport