Container

Component

Storybook

Figma Demo

Guidelines

Variations

Containers don’t have interactive states. They are offered in three sizes, each with corresponding corner radii and padding:

• sm: corner-sm, padding 12px
• base: corner, padding 16px
• lg: corner-lg, padding 24px

Static containers are either flat or have a shadow treatment. Note that the wrapper version of the static container is only flat.

Shadow treatments for static containers are pre-defined, and each container size only has one shadow style available.

Usage

Different container types are suggested for specific elements:

• Flat (no shadow) containers: Currently the only specific instance for a flat container would be an inline alert.
• Containers with shadows:
  • sm: Tooltips
  • base: Dropdown menus & alerts
  • lg: Modals or larger dropdown menus, such as global search

Best Practices

• If cards are placed inside other cards, always put smaller inside larger so that corners nest more effectively.
• Refrain from using shadows on static containers that sit inline with other content.

Component Specs

API

• as: 'div' | 'aside' | 'article' | 'section' | 'menu' | Default: 'div'
  Element type for the static container.

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

• shadow: boolean | Default: false
  Shadow for the static container.

• size: 'sm' | 'default' | 'lg' | Default: 'default'
  Size of the container.

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

• wrapper: boolean | Default: false
  Wrapper container.

Example

<script>
	import { Container } from '@getprovi/craft-svelte';
</script>

<Container />
<Container size="sm">Sample Content</Container>
<Container size="lg">Sample Content</Container>
<Container wrapper>Sample Content</Container>
<Container href="#" on:click="{}">Sample Content</Container>
<Container shadow="base">Sample Content</Container>
<Container size="sm" shadow="sm">Sample Content</Container>
<Container size="lg" shadow="xl">Sample Content</Container>
<Container as="aside" wrapper>Sample Content</Container>

Types

interface Props extends Omit<ComponentProps<Frame>, 'role'> {
	as?: 'div' | 'section' | 'aside' | 'article' | 'menu';
	class?: string | null | undefined;
	size?: 'sm' | 'default' | 'lg';
	shadow?: boolean;
	testId?: string | undefined;
	wrapper?: boolean;
}