Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
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.

FigmaGitHub

Examples

<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}>
    Neutral
  </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>

Guidelines

The StaticCard component serves as a versatile display container for presenting static content in a visually consistent and engaging manner. It is ideal for showcasing important information, highlighting features, or displaying standalone content blocks within the user interface.

Props

StaticCard uses props from Box and you are able to tweak these as you wish.

Code

<StaticCard />

import { StaticCard } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
colorPalettestring"white" | "grey" | "blue" | "darkBlue" | "green" | "darkGreen" | "teal" | "yellow" | "darkYellow" | "orange" | "red" - defaults to white