Skip to content
Vy logo
Components

Box

Box is the foundational building block for all components in Spor.

Examples

A simple box with backgroundcolor

<Box backgroundColor="mint">
  En veldig enkel boks
</Box>

A Box with padding and rounded corners

<Box padding={4} borderRadius="md" backgroundColor="cornSilk">
  En litt mer kreativ boks
</box>

A Box that is actually a link

<Box
  display="block"
  padding={2}
  width="fit-content"
  border="1px solid"
  borderColor="darkTeal"
  backgroundColor="mint"
  _hover={{ backgroundColor: "seaMist" }}
  asChild={true}
>
  <a
    href="https://www.youtube.com/watch?v=Zvz6kFVJpwo&list=PLcU9Unqugm6YuG5NM_av57pJajVhgaV7w"
    target="_blank"
    rel="noreferrer"
  >
    En fin video om tog!
  </a>
</Box>;