Components

Line tags

Linjetags describe a type of modality

Examples

Line icon, info tag and travel tag

<Flex gap={3}>
  <LineIcon variant="ferry" />
  <InfoTag variant="local-train" title="L2" description="Lillestrøm" />
  <TravelTag variant="vy-bus" title="L2" description="Lillestrøm" />
</Flex>

Travel tags (with the colored background) and info tags (no background), with and without title and description

<Stack>
  <HStack>
    <LineIcon variant="local-train" />
    <TravelTag variant="local-train" title="L1" />
    <TravelTag variant="local-train" title="L1" description="Lillestrøm" />
  </HStack>
  <HStack>
    <LineIcon variant="region-train" />
    <InfoTag variant="region-train" title="R1" />
    <InfoTag variant="region-train" title="R1" description="Dombås" />
  </HStack>
</Stack>

Info tags and travel tags in different sizes

<Stack>
  <HStack>
    <LineIcon variant="local-train" size="sm" />
    <LineIcon variant="local-train" size="md" />
    <LineIcon variant="local-train" size="lg" />
  </HStack>
  <HStack>
    <InfoTag variant="local-train" size="sm" title="L2" description="Hønefoss" />
    <InfoTag variant="local-train" size="md" title="L2" description="Hønefoss" />
    <InfoTag variant="local-train" size="lg" title="L2" description="Hønefoss" />
  </HStack>
  <HStack>
    <TravelTag variant="local-train" size="sm" title="L2" description="Hønefoss" />
    <TravelTag variant="local-train" size="md" title="L2" description="Hønefoss"  />
    <TravelTag variant="local-train" size="lg" title="L2" description="Hønefoss" />
  </HStack>
</Stack>

All the different info tags

<Flex gap={1} flexWrap="wrap">
  <InfoTag variant="local-train" title="L1" description="Lillestrøm" />
  <InfoTag variant="region-train" title="R1" description="Dombås" />
  <InfoTag variant="region-express-train" title="E2" description="Drammen" />
  <InfoTag variant="long-distance-train" title="D3" description="Stockholm" />
  <InfoTag variant="airport-express-train" title="F1" description="Oslo" />
  <InfoTag variant="vy-bus" title="VY123" description="Arendal" />
  <InfoTag variant="local-bus" title="46" description="Ullerntoppen" />
  <InfoTag variant="ferry" title="1450" description="Nesodden" />
  <InfoTag variant="subway" title="5" description="Østerås" />
  <InfoTag variant="tram" title="19" description="Ljabru" />
  <InfoTag variant="alt-transport" title="Alternativ transport" />
  <InfoTag variant="walk" title="5" description="min" />
</Flex>

All the different travel tags

<Flex gap={1} flexWrap="wrap">
  <TravelTag variant="local-train" title="L1" description="Lillestrøm" />
  <TravelTag variant="region-train" title="R1" description="Dombås" />
  <TravelTag variant="region-express-train" title="E2" description="Drammen" />
  <TravelTag variant="long-distance-train" title="D3" description="Stockholm" />
  <TravelTag variant="airport-express-train" title="F1" description="Oslo" />
  <TravelTag variant="vy-bus" title="VY123" description="Arendal" />
  <TravelTag variant="local-bus" title="46" description="Ullerntoppen" />
  <TravelTag variant="ferry" title="1450" description="Nesodden" />
  <TravelTag variant="subway" title="5" description="Østerås" />
  <TravelTag variant="tram" title="19" description="Ljabru" />
  <TravelTag variant="alt-transport" title="Alternativ transport" />
  <TravelTag variant="walk" title="5" description="min" />
</Flex>

A pressable travel tag

<TravelTag 
  as="button" 
  onClick={() => alert("Bra trykk!")}
  variant="local-train"
  title="L2"
  description="Lillestrøm"
/>

Different deviation versions

<Flex gap={1} flexWrap="wrap">
  <TravelTag 
    variant="local-train" 
    title="L1" 
    description="Lillestrøm"
    deviationLevel="critical"
  />
  <TravelTag 
    variant="local-train" 
    title="L1" 
    description="Lillestrøm"
    deviationLevel="major"
  />
  <TravelTag 
    variant="local-train" 
    title="L1" 
    description="Lillestrøm"
    deviationLevel="minor"
  />
  <TravelTag 
    variant="local-train" 
    title="L1" 
    description="Lillestrøm"
    deviationLevel="info"
  />
</Flex>

Deactivated linetags

<TravelTag variant="local-train" title="L2" isDisabled />

Different line icons

<Flex gap={1} flexWrap="wrap">
  <LineIcon variant="local-train" />
  <LineIcon variant="region-train" />
  <LineIcon variant="region-express-train" />
  <LineIcon variant="long-distance-train" />
  <LineIcon variant="airport-express-train" />
  <LineIcon variant="vy-bus" />
  <LineIcon variant="local-bus" />
  <LineIcon variant="ferry" />
  <LineIcon variant="subway" />
  <LineIcon variant="tram" />
  <LineIcon variant="alt-transport" />
  <LineIcon variant="walk" />
</Flex>

A custom line tag

<TravelTag
  variant="custom"
  customIconVariant="ferry"
  backgroundColor="#c0ff33"
  foregroundColor="#bada55"
  title="☕️"
  description="Very custom"
/>