Try it

Deployments

Svelte

<Heading level={2}>Deployments</Heading>

Examples

Section title

Deployments

Section title.svelte

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

<Heading level={2}>Deployments</Heading>

Levels

Workspace

Production

Services

Search gateway

Levels.svelte

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

<Stack>
	<Heading level={1}>Workspace</Heading>
	<Heading level={2}>Production</Heading>
	<Heading level={3}>Services</Heading>
	<Heading level={4}>Search gateway</Heading>
</Stack>

Sizes

Ship today

Ready to deploy

Release overview

Deployment history

Recent releases

Build details

Sizes.svelte

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

<Stack>
	<Heading level={2} size="hero">Ship today</Heading>
	<Heading level={2} size="display">Ready to deploy</Heading>
	<Heading level={2} size="h1">Release overview</Heading>
	<Heading level={2} size="h2">Deployment history</Heading>
	<Heading level={2} size="h3">Recent releases</Heading>
	<Heading level={2} size="h4">Build details</Heading>
</Stack>

API

Import

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

Prop	Type	Default
`level`	`1 \| 2 \| 3 \| 4`	none
`size?`	`HeadingSize`	none
`id?`	`string`	none

Snippet
`children`

Hook	Kind
`.tcp-heading`	Root class
`data-size`	Data attribute