Site settings
Change the appearance of the site to suit your preferences
Alert
Alerts – also known as info messages – communicate information of varying degrees of importance, and are arranged in a clear color hierarchy.
A basic Alert
<Alert variant="important"> Det er arbeid på strekningen Oslo - Drammen, som kan føre til ekstra mye å se på om man har vindusplass. </Alert>
A closable Alert with a title and custom icon. Use size 24px icons.
Icons from the icon prop will automatically be given the alerts icon color.
<Alert variant="info" title="Arbeid med utsikt" icon={NotificationFill24Icon} closable> Det er arbeid på strekningen Oslo - Drammen, som kan føre til ekstra mye å se på om man har vindusplass. </Alert>
Alert variants
<SimpleGrid gap="2" columns={{ base: 1, xl: 2 }}> {[ "important", "alt", "error", "success", "info", "neutral", "error-secondary", "service", ].map((variant) => ( <Alert variant={variant} title={`${variant} alert`} closable> Informasjon om alternativ transport for avganger som ikke går som normalt. </Alert> ))} </Flex>;
Expandable alert
<ExpandableAlert variant="success" title="Billett i boks"> <Stack> <Text>Da er sommerens ferie på plass. Vi håper du gleder deg like mye som vi gjør.</Text> <Text>Og vi gleder oss masse!</Text> </Stack> </ExpandableAlert>
Expandable variants
<Stack> <ExpandableAlert variant="important" title="Billett i boks"> <Stack> <Text>Da er sommerens ferie på plass. Vi håper du gleder deg like mye som vi gjør.</Text> <Text>Og vi gleder oss masse!</Text> </Stack> </ExpandableAlert> <ExpandableAlert variant="success" title="Billett i boks"> <Stack> <Text>Da er sommerens ferie på plass. Vi håper du gleder deg like mye som vi gjør.</Text> <Text>Og vi gleder oss masse!</Text> </Stack> </ExpandableAlert> <ExpandableAlert variant="alt" title="Billett i boks"> <Stack> <Text>Da er sommerens ferie på plass. Vi håper du gleder deg like mye som vi gjør.</Text> <Text>Og vi gleder oss masse!</Text> </Stack> </ExpandableAlert> <ExpandableAlert variant="info" title="Billett i boks"> <Stack> <Text>Da er sommerens ferie på plass. Vi håper du gleder deg like mye som vi gjør.</Text> <Text>Og vi gleder oss masse!</Text> </Stack> </ExpandableAlert> <ExpandableAlert variant="error" title="Billett i boks"> <Stack> <Text>Da er sommerens ferie på plass. Vi håper du gleder deg like mye som vi gjør.</Text> <Text>Og vi gleder oss masse!</Text> </Stack> </ExpandableAlert> </Stack>
ServiceAlert, with two notifications (service)
<ServiceAlert title="Error with Vipps" notification={2} contentWidth="container.md"> <Text>First. Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text> <Text>Second. Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text> </ServiceAlert>
ServiceAlert (global-deviation)
<ServiceAlert title="Error with Vipps" notification={2} variant="global-deviation" contentWidth="container.md"> <Text>First. Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text> </ServiceAlert>