AspectRatio | tcpsystems/ui

Try it

Svelte

<AspectRatio ratio={1.777} />

Examples

Video preview

Release walkthrough, 16:9

Video preview.svelte

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

<AspectRatio ratio={16 / 9}>
	<div class="tcp-surface">
		<Text>Release walkthrough, 16:9</Text>
	</div>
</AspectRatio>

Square avatar

Team photo, 1:1

Square avatar.svelte

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

<AspectRatio ratio={1}>
	<div class="tcp-surface">
		<Text>Team photo, 1:1</Text>
	</div>
</AspectRatio>

API

Import

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

Prop	Type	Default
`ratio`	`number`	none

Snippet
`children`

Hook	Kind
`.tcp-aspect`	Root class