Tray

Component

Storybook

Figma Demo

Guidelines

Trays must be placed close to the root layout. The Tray uses ‘sticky’ positioning, so its parent element should use ‘relative’ positioning.

Variations

The tray has a consistent layout across breakpoints with some specific size exceptions:

Desktop (Greater than 1023px): Not visible.

Tablet (1023-700px): full width, with margins of 32px all around tray content.

Mobile (Less than 700px): full width, with margins of 16ps all around tray content.

Usage

The Tray component is used to keep essential actions and information visible on smaller screens. Scroll behavior within the Tray is not explicitly defined and can be at the discretion of the design of the tray contents.

Best Practices

Use the Tray to keep the primary CTA or other important actions visible on pages where they may otherwise be challenging to locate, due to page length.

Content

• Try to keep tray content minimal, to ensure it doesn’t block too much of the content of the page itself. If you need multiple elements in the tray, consider using an accordion or other collapsible element, to keep the height of the tray to a minimum.
• Consider space between elements in your layout, as well as scrollability, but the padding around your content will come from the tray itself.

Component Specs

API

• class: string | Default: undefined
  Class name for the tray.

• testId: string | Default: undefined
  Test id for the container.

Example

import {Tray} from '@getprovi/craft-svelte'

<!-- The Tray should be placed close to the root layout -->
<div class="relative">
	<h1>Some other content</h1>
	<Tray>
		<p>Some extra information</p>
	</Tray>
</div>

Types

interface Props extends Omit<ComponentProps<Frame>, 'role'> {
	class?: string | null | undefined;
	testId?: string | undefined;
}