Split | tcpsystems/ui

Examples

Invoice detail

Invoice INV-1042

Billed to Northwind Traders, due 30 November.

Platform plan, 12 users

Total: $1,440.00

Invoice detail.svelte

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

<Split>
	<Stack>
		<Heading level={3}>Invoice INV-1042</Heading>
		<Text tone="muted">Billed to Northwind Traders, due 30 November.</Text>
	</Stack>
	<Stack>
		<Text>Platform plan, 12 users</Text>
		<Text>Total: $1,440.00</Text>
	</Stack>
</Split>

Settings

Team access

Invite people and manage their roles.

Settings.svelte

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

<Split gap="xl">
	<Stack gap="sm">
		<Text>Team access</Text>
		<Text tone="muted">Invite people and manage their roles.</Text>
	</Stack>
	<Button variant="primary">Invite member</Button>
</Split>

API

Import

import Split from '@tcpsystems/ui/foundation/Split';

Prop	Type	Default
`as?`	`string`	`'div'`
`gap?`	`string`	none
`min?`	`string`	none
`width?`	`string`	none
`justify?`	`string`	none
`children?`	`native`	none

Hook	Kind
`.tcp-split`	Root class
`data-gap`	Data attribute
`data-justify`	Data attribute
`data-min`	Data attribute
`data-width`	Data attribute