Stack

<script lang="ts">
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Heading from '@tcpsystems/ui/foundation/Heading';
	import Text from '@tcpsystems/ui/foundation/Text';
	import Button from '@tcpsystems/ui/foundation/Button';
</script>

<Stack>
	<Heading level={3}>Deployment ready</Heading>
	<Text tone="muted">api-gateway v2.14.0 passed all checks on production.</Text>
	<Button variant="primary">Promote to production</Button>
</Stack>

<script lang="ts">
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Text from '@tcpsystems/ui/foundation/Text';
</script>

<Stack gap="xl">
	<Stack gap="sm">
		<Text>Build passed</Text>
		<Text>Tests passed</Text>
		<Text>Image pushed</Text>
	</Stack>
	<Stack gap="lg">
		<Text>Canary at 10%</Text>
		<Text>Canary at 50%</Text>
		<Text>Rolled out to 100%</Text>
	</Stack>
</Stack>

<script lang="ts">
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack as="ul" gap="sm">
	<li>Maria Chen approved invoice INV-1042</li>
	<li>Tomás Ruiz commented on invoice INV-1043</li>
	<li>Priya Nair paid invoice INV-1044</li>
</Stack>