Skip to content
Vy logo
Components​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌‌‍​‌‌‍​‍​‍‌​‍​​​‍​‌​​‌​​‌​‍‌‌‍‌‌​‌​​‌‌‍‌‍​‍‌​‌​‌‍​‌​​‌‌‍‌‍​‍‌​‍​​‌‌‌‍‌‌‌‍‌‍​‍‌‌‍‌​​‌‍‌‍‌​​‌‍‌‍‌​‌‍‌‌‌‍​‌‌‍​‌‍‌​‌‍‌​‌‍‌‍‌‍‌‌​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‍​‌‌‌​‌‍‌‌‌‍‌‌‍‌​‍‌‍‌​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​‌​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‌‍‍‌‌‍‌​​‌‌‍​‌‌‍​‍​‍‌​‍​​​‍​‌​​‌​​‌​‍‌‌‍‌‌​‌​​‌‌‍‌‍​‍‌​‌​‌‍​‌​​‌‌‍‌‍​‍‌​‍​​‌‌‌‍‌‌‌‍‌‍​‍‌‌‍‌​​‌‍‌‍‌​​‌‍‌‍‌​‌‍‌‌‌‍​‌‌‍​‌‍‌​‌‍‌​‌‍‌‍‌‍‌‌​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‍​‌‌‌​‌‍‌‌‌‍‌‌‍‌​‍‌‍‌​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‍‌‍‌​​‌‍‌‌‌​‍‌​‌​​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‌‍‌‍‌‌​‌‌​​‌‌‌‌‍​‍‌‍​‌‍‍‌‌​‌‍‍​‌‍‌‌‌‍‌​​‍​‍‌‌

StaticCard​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌‌‍​‍​‍​​‌‍​‌‌‍​‍‌‍‌‌​​​​​‌​‍‌‌‍​‌​‍‌‌‍‌‌​​​‍‌​‌​​‌‌‍​​​‌​‍‌‌‍​‌​‌​​‌‍‌‍​​‍‌‌‍​‌​‌‌‍‌‍​‌‌‍​‍​‌‌‍‌​​‌‌‌‍​‍‌‍‌‌​​‍‌‍‌​​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​‌​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‌‍‍‌‌‍‌​​‌‌‍​‍​‍​​‌‍​‌‌‍​‍‌‍‌‌​​​​​‌​‍‌‌‍​‌​‍‌‌‍‌‌​​​‍‌​‌​​‌‌‍​​​‌​‍‌‌‍​‌​‌​​‌‍‌‍​​‍‌‌‍​‌​‌‌‍‌‍​‌‌‍​‍​‌‌‍‌​​‌‌‌‍​‍‌‍‌‌​​‍‌‍‌​​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‍‌‍‌​​‌‍‌‌‌​‍‌​‌​​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‌‍‌‍‌‌​‌‌​​‌‌‌‌‍​‍‌‍​‌‍‍‌‌​‌‍‍​‌‍‌‌‌‍‌​​‍​‍‌‌

The `StaticCard` component can be used to create a card that does not respond to user interactions. It can be rendered as any HTML element by specifying the `as` prop.​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌‌‍​‍​‍​​‌‍​‌‌‍​‍‌‍‌‌​​​​​‌​‍‌‌‍​‌​‍‌‌‍‌‌​​​‍‌​‌​​‌‌‍​​​‌​‍‌‌‍​‌​‌​​‌‍‌‍​​‍‌‌‍​‌​‌‌‍‌‍​‌‌‍​‍​‌‌‍‌​​‌‌‌‍​‍‌‍‌‌​​‍‌‍‌​​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍‍‌‌‍‍‌‌​‌​‍‌‍‌‍‌​‌‌‌‌‍​‌‌​‌‍‍‌‌‍‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍‌​‌‍‌​​‌​‌​​‌​​‍​‌‌​‍‌‌‍‌‍‌‍​‌‍​‍‌‍​‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍‌‌​​‍‌‍​‍‌‍​‌​‌‍​‍​​‌‌​‍​‌‍‌‌​​‌​​‌‍‌‍​​​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​‌​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‌‍‍‌‌‍‌​​‌‌‍​‍​‍​​‌‍​‌‌‍​‍‌‍‌‌​​​​​‌​‍‌‌‍​‌​‍‌‌‍‌‌​​​‍‌​‌​​‌‌‍​​​‌​‍‌‌‍​‌​‌​​‌‍‌‍​​‍‌‌‍​‌​‌‌‍‌‍​‌‌‍​‍​‌‌‍‌​​‌‌‌‍​‍‌‍‌‌​​‍‌‍‌​​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍‍‌‌‍‍‌‌​‌​‍‌‍‌‍‌​‌‌‌‌‍​‌‌​‌‍‍‌‌‍‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍‌​‌‍‌​​‌​‌​​‌​​‍​‌‌​‍‌‌‍‌‍‌‍​‌‍​‍‌‍​‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍‌‌​​‍‌‍​‍‌‍​‌​‌‍​‍​​‌‌​‍​‌‍‌‌​​‌​​‌‍‌‍​​​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‍‌‍‌​​‌‍‌‌‌​‍‌​‌​​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‌‍‌‍‌‌​‌‌​​‌‌‌‌‍​‍‌‍​‌‍‍‌‌​‌‍‍​‌‍‌‌‌‍‌​​‍​‍‌‌

<Flex>
  <StaticCard padding={3} border borderWidth={1}>
    Simple static card
  </StaticCard>
</Flex>

Define `colorPalette` to choose another variant.​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌‌‍​‍​‍​​‌‍​‌‌‍​‍‌‍‌‌​​​​​‌​‍‌‌‍​‌​‍‌‌‍‌‌​​​‍‌​‌​​‌‌‍​​​‌​‍‌‌‍​‌​‌​​‌‍‌‍​​‍‌‌‍​‌​‌‌‍‌‍​‌‌‍​‍​‌‌‍‌​​‌‌‌‍​‍‌‍‌‌​​‍‌‍‌​​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍​‌‍‌‍‌‌​​‌‍‌‍‍‌‍‌‌‌‍‍‌‌​‌‌​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‍‌‍‍‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍‌‍‌‍‌‌​‌‌​​‍​‌‌‍‌‍​‌​​‌‍‌‍‌‍‌‍​‌​​‍​​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​​‍​‌​‌‍‌‌​‍​​‍‌‌‍‌‌​‌​‌‍​‍​​‍​‍​​‍‌​​‌​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‌​‌‍‌‍‌‍​​‌​‍​​‍‌​‌​​‌‍‌‍‌‌‌‍‌‍‌‍​‌‍‌‌​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​‌​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌‌‍‌‍‌‌‍‌​‌‍‌‌‌​‌‍‍‌‌‍‌‌‍‍‌‍‌‌‍​‌‌‍‍‌‌‌‌‍​‌‌‍​​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‌‍‍‌‌‍‌​​‌‌‍​‍​‍​​‌‍​‌‌‍​‍‌‍‌‌​​​​​‌​‍‌‌‍​‌​‍‌‌‍‌‌​​​‍‌​‌​​‌‌‍​​​‌​‍‌‌‍​‌​‌​​‌‍‌‍​​‍‌‌‍​‌​‌‌‍‌‍​‌‌‍​‍​‌‌‍‌​​‌‌‌‍​‍‌‍‌‌​​‍‌‍‌​​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍​‌‍‌‍‌‌​​‌‍‌‍‍‌‍‌‌‌‍‍‌‌​‌‌​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‍‌‍‍‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍‌‍‌‍‌‍‌‌​‌‌​​‍​‌‌‍‌‍​‌​​‌‍‌‍‌‍‌‍​‌​​‍​​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​​‍​‌​‌‍‌‌​‍​​‍‌‌‍‌‌​‌​‌‍​‍​​‍​‍​​‍‌​​‌​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‌​‌‍‌‍‌‍​​‌​‍​​‍‌​‌​​‌‍‌‍‌‌‌‍‌‍‌‍​‌‍‌‌​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‍‌‍‌​​‌‍‌‌‌​‍‌​‌​​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‌‍‌‍‌‌​‌‌​​‌‌‌‌‍​‍‌‍​‌‍‍‌‌​‌‍‍​‌‍‌‌‌‍‌​​‍​‍‌‌

<Grid gap={2} flexWrap="wrap" templateColumns="repeat(auto-fit, minmax(120px, 1fr))">
  <StaticCard colorPalette="white" padding={3}>
    White
  </StaticCard>
  <StaticCard colorPalette="grey" padding={3}>
    Grey
  </StaticCard>
  <StaticCard colorPalette="yellow" padding={3}>
    Yellow
  </StaticCard>
  <StaticCard colorPalette="darkYellow" padding={3}>
    Dark yellow
  </StaticCard>
  <StaticCard colorPalette="red" padding={3}>
    Red
  </StaticCard>
  <StaticCard colorPalette="green" padding={3}>
    Green
  </StaticCard>
  <StaticCard colorPalette="blue" padding={3}>
    Blue
  </StaticCard>
  <StaticCard colorPalette="orange" padding={3}>
    Orange
  </StaticCard>  
</Grid>