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>;

Guidelines

Box is a pretty special component. You can think of it as a <div /> that you can style using props and design tokens.

<Box>Jeg er inne i en boks</Box>

A Box by itself – just like a <div> – doesn’t do much. But it can be shaped to do all sorts of things. Here are a few different examples:

<Stack>
  <Box backgroundColor="darkTeal" color="white" padding={3}>
    En mørkegrønn boks
  </Box>
  <Box borderRadius="round" backgroundColor="rajah" padding={5} width="fit-content">
    Rund
  </Box>
  <Box 
    boxShadow="md" 
    border="1px solid" 
    borderColor="lightRed" 
    padding={1} 
    color="brightRed"
  >
    Feilmelding
  </Box>
</Stack>

Spacing

Many components often need some distance between each other. You can easily specify this using margin props.

There are a number of different margin props you can set:

<Box
  margin={1}
  marginX={2}
  marginY={2}
  marginTop={3}
  marginRight={3}
  marginBottom={3}
  marginLeft={3}
>
  Juster verdiene for å se hva de gjør
</Box>

Tips og Triks

I React har du muligheten til å spesifisere forskjellige enheter, som f.eks. rem eller em, om du vil. Vi anbefaler som regel allikevel at man bruker spacing-skalaen der det gir mening

Which props are supported?

The Box component accepts all styling props that can be passed to a div or a View.

In the React implementation, you can also specify which DOM element you want it to render as.

<Box as="a" href="/">Gå til forsiden</Box>

Code

`<Box />`

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

The base element in our design system. Used to make anyting based on design tokens. Can be thought of as a div.

There are a lot of props to use. Use autocompletion for a complete list.

Props

Name	Type	Description
`backgroundColor`	`string`
`borderRadius`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "round"`
`as`	`string \| React.ComponentType`	Lets you change the underlying DOM element rendered
`color`	`string`	Text color
`boxShadow`	`"none" \| "sm" \| "md" \| "lg"`
`height`	`string`
`width`	`string`
`margin`	`number`	Also marginTop, marginRight, marginBottom, marginLeft, marginX and marginY (marginHorizontal and marginVertical in React Native)
`padding`	`number`	Also paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX and paddingY (paddingHorizontal and paddingVertical in React Native)
`zIndex`	`"hide" \| "base" \| "docked" \| "dropdown" \| "sticky" \| "banner" \| "overlay" \| "modal" \| "popover" \| "skipLink" \| "toast" \| "tooltip"`

Fundamentals

Getting started