Grid

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

<Grid min="sm">
	<div class="tcp-surface">
		<Text tone="muted">Deployments today</Text>
		<Heading level={3}>42</Heading>
	</div>
	<div class="tcp-surface">
		<Text tone="muted">Open invoices</Text>
		<Heading level={3}>7</Heading>
	</div>
	<div class="tcp-surface">
		<Text tone="muted">Active members</Text>
		<Heading level={3}>18</Heading>
	</div>
</Grid>

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

<Grid min="sm" gap="lg">
	<Button>us-east</Button>
	<Button>eu-west</Button>
	<Button>ap-south</Button>
	<Button>sa-east</Button>
</Grid>