Logo

Component

Storybook

Figma Demo

Guidelines

Variations

The logo is offered in two variations in our brand color or inverted to white on brand background:

• Circular “Super P” treatment
• Full Provi wordmark

Usage

Our logo is the most direct expression of our brand and shouldn’t be used without express permission from the brand/marketing team. It currently only appears in the header and footer of our site.

Component Specs

API

• class: string | Default: undefined
  Extra classes provided to the component.

• color: 'brand' | 'white' | Default: 'brand'
  Sets the color of the logo.

• href: string | Default: undefined
  The href of the logo.

• linkClasses: string | Default: undefined
  The classes of the link.

• title: string | Default: undefined
  The title of the logo.

• testId: string | Default: undefined
  Sets the test id of the logo.

• wordmark: boolean | Default: false
  Sets the logo to be the wordmark logo.

Example

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

<Logo class="tablet:w-56 w-48" />
<Logo wordmark color="white" />

Types

import type { ComponentProps, SvelteComponent } from 'svelte';

interface Props extends Omit<ComponentProps<Icon>, 'size' | 'iconName' | 'color' | 'logo'> {
	class?: string;
	color?: 'brand' | 'white';
	testId?: string | undefined;
	wordmark?: boolean;
}