---
name: footer-trust
title: Footer Trust
url: https://ui.frontic.com/components/sections/footer-trust.md
tier: sections
install: npx @frontic/ui add footer-trust
files:
  - components/sections/footer-trust/FooterTrust.vue
  - components/sections/footer-trust/index.ts
  - components/sections/footer-trust/types.ts
registryDependencies:
  - badge
  - separator
  - text
dependencies:
  - "@lucide/vue"
---

# Footer Trust

Footer with four trust points, payment method badges and legal links.

## Install

```sh
npx @frontic/ui add footer-trust
```

Built from: [Badge](https://ui.frontic.com/components/ui/badge.md), [Separator](https://ui.frontic.com/components/ui/separator.md), [Text](https://ui.frontic.com/lib/text.md)

npm packages: `@lucide/vue`

## Examples

```vue
<script setup lang="ts">
import { FooterTrust, type FooterLink, type FooterTrustItem } from '@/components/sections/footer-trust'

const items: FooterTrustItem[] = [
  { icon: 'shipping', title: 'Free shipping', description: 'On all orders' },
  { icon: 'returns', title: 'Free returns', description: 'On all orders' },
  { icon: 'payment', title: 'Secure payment', description: 'Encrypted and verified by your bank' },
  { icon: 'support', title: 'Customer support', description: 'Mon–Fri, 9am–5pm' },
]

const paymentMethods = ['Visa', 'Mastercard', 'Amex', 'PayPal', 'Klarna']

const legalLinks: FooterLink[] = [
  { label: 'Privacy', href: '#' },
  { label: 'Terms', href: '#' },
  { label: 'Imprint', href: '#' },
]
</script>

<template>
  <FooterTrust brand-name="Basecamp Store" :items="items" :payment-methods="paymentMethods" :legal-links="legalLinks" />
</template>
```

## API reference

### FooterTrust

Shows trust points such as shipping and returns, accepted payment methods and legal links. Renders a `<footer>`.

`data-slot="footer-trust"` · `FooterTrust.vue`

Styling: [`section-title`](https://ui.frontic.com/recipes/shared/section-title.json); [`meta`](https://ui.frontic.com/recipes/shared/meta.json); [`hint`](https://ui.frontic.com/recipes/shared/hint.json); [`link`](https://ui.frontic.com/recipes/shared/link.json). Change them there and every part that extends them follows.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `FooterTrustItem[]` | `[]` | The trust points across the top, such as shipping, returns and support, each with an icon. |
| `paymentMethods` | `string[]` | `[]` | Names of the accepted payment methods, one badge each, e.g. `Visa`. |
| `legalLinks` | `FooterLink[]` | `[]` | Links in the bottom row, such as the imprint and privacy policy. |
| `brandName` | `string` | `'STORE'` | The store's name, filled into `{brand}` in the copyright. |
| `paymentsLabel` | `string` | `'We accept'` | Shown before the payment method badges. |
| `copyright` | `string` | `'© {year} {brand}'` | Shown in the bottom row; `{year}` becomes the current year and `{brand}` the brand name. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

## Exports

```ts
import { type FooterLink, type FooterTrustItem } from '@/components/sections/footer-trust'
```

- `FooterLink`: below
- `FooterTrustItem`: below

```ts
interface FooterLink {
  label: string
  href: string
}

interface FooterTrustItem {
  icon: 'shipping' | 'payment' | 'returns' | 'support'
  title: string
  description: string
}
```

## Styling

| Part | Recipe |
| --- | --- |
| `default` | [`footer-trust`](https://ui.frontic.com/recipes/footer-trust.json) |
| `icon` | [`footer-trust-icon`](https://ui.frontic.com/recipes/footer-trust-icon.json) |
| `section-title` | [`section-title`](https://ui.frontic.com/recipes/shared/section-title.json) |
| `meta` | [`meta`](https://ui.frontic.com/recipes/shared/meta.json) |
| `hint` | [`hint`](https://ui.frontic.com/recipes/shared/hint.json) |
| `link` | [`link`](https://ui.frontic.com/recipes/shared/link.json) |
| `focus-ring` | [`focus-ring`](https://ui.frontic.com/recipes/shared/focus-ring.json) |

States with a look of their own: focus.

## Source

`components/sections/footer-trust/FooterTrust.vue`

```vue
<script lang="ts">
/** Shows trust points such as shipping and returns, accepted payment methods and legal links. */
export default {}
</script>

<script setup lang="ts">
import { TruckIcon, ShieldCheckIcon, RefreshCcwIcon, CircleHelpIcon } from '@lucide/vue'

import type { HTMLAttributes } from 'vue'
import type { FooterLink, FooterTrustItem } from './types'
import { Badge } from '@library/components/ui/badge'
import { Separator } from '@library/components/ui/separator'
import { interpolate } from '@library/lib/text'

const props = withDefaults(
  defineProps<{
    /** The trust points across the top, such as shipping, returns and support, each with an icon. */
    items?: FooterTrustItem[]
    /** Names of the accepted payment methods, one badge each, e.g. `Visa`. */
    paymentMethods?: string[]
    /** Links in the bottom row, such as the imprint and privacy policy. */
    legalLinks?: FooterLink[]
    /** The store's name, filled into `{brand}` in the copyright. */
    brandName?: string
    /** Shown before the payment method badges. */
    paymentsLabel?: string
    /** Shown in the bottom row; `{year}` becomes the current year and `{brand}` the brand name. */
    copyright?: string
    class?: HTMLAttributes['class']
  }>(),
  {
    items: () => [],
    paymentMethods: () => [],
    legalLinks: () => [],
    brandName: 'STORE',
    paymentsLabel: 'We accept',
    copyright: '© {year} {brand}',
  },
)
const year = String(new Date().getFullYear())
</script>

<template>
  <footer data-slot="footer-trust" :class="['fui-footer-trust @container', props.class]">
    <Separator />
    <div class="mx-auto grid w-full max-w-7xl grid-cols-2 gap-x-6 gap-y-8 px-4 py-10 @2xl:px-6 @4xl:grid-cols-4 @5xl:px-8">
      <div v-for="item in items" :key="item.title" class="flex flex-col gap-3 @lg:flex-row @lg:items-center">
        <div data-slot="footer-trust-icon" class="fui-footer-trust-icon flex shrink-0 items-center justify-center">
          <TruckIcon v-if="item.icon === 'shipping'" data-icon />
          <ShieldCheckIcon v-else-if="item.icon === 'payment'" data-icon />
          <RefreshCcwIcon v-else-if="item.icon === 'returns'" data-icon />
          <CircleHelpIcon v-else data-icon />
        </div>
        <div class="flex flex-col gap-0.5">
          <p data-slot="section-title" class="fui-section-title">
            {{ item.title }}
          </p>
          <p data-slot="meta" class="fui-meta">{{ item.description }}</p>
        </div>
      </div>
    </div>
    <Separator />
    <div class="mx-auto flex w-full max-w-7xl flex-col gap-5 px-4 py-6 @2xl:px-6 @3xl:flex-row @3xl:items-center @3xl:justify-between @5xl:px-8">
      <div v-if="paymentMethods.length" class="flex flex-wrap items-center gap-2">
        <div v-if="paymentsLabel" class="me-1">
          <span data-slot="meta" class="fui-meta">{{ paymentsLabel }}</span>
        </div>
        <Badge v-for="method in paymentMethods" :key="method">{{ method }}</Badge>
      </div>
      <div class="flex flex-col gap-2 @md:flex-row @md:items-center @md:gap-5">
        <span data-slot="hint" class="fui-hint">{{ interpolate(copyright, { year, brand: brandName }) }}</span>
        <div v-if="legalLinks.length" class="flex flex-wrap items-center gap-x-5 gap-y-2">
          <a v-for="link in legalLinks" :key="link.label" :href="link.href" data-slot="link" class="fui-link outline-none focus-visible:fui-focus-ring">{{ link.label }}</a>
        </div>
      </div>
    </div>
  </footer>
</template>
```

`components/sections/footer-trust/types.ts`

```ts
export interface FooterLink {
  label: string
  href: string
}

export interface FooterTrustItem {
  icon: 'shipping' | 'payment' | 'returns' | 'support'
  title: string
  description: string
}
```