Vinicunca

PageLogos

GitHub
A list of logos or images to display on your pages.

Usage

The PageLogos component provides a flexible way to display a list of logos or images in your pages.

<template>
  <PPageLogos
    :items="[
      'i-simple-icons-github',
      'i-simple-icons-discord',
      'i-simple-icons-x',
      'i-simple-icons-instagram',
      'i-simple-icons-linkedin',
      'i-simple-icons-facebook'
    ]"
  />
</template>

Title Soon

Use the title prop to set the title above the logos.

Trusted by the best front-end teams

<template>
  <PPageLogos
    title="Trusted by the best front-end teams"
    :items="[
      'i-simple-icons-github',
      'i-simple-icons-discord',
      'i-simple-icons-x',
      'i-simple-icons-instagram',
      'i-simple-icons-linkedin',
      'i-simple-icons-facebook'
    ]"
  />
</template>
The title is rendered as an h2 by default. Use the as prop with an object to change it, for example :as="{ title: 'h3' }". You can also set the root element this way: :as="{ root: 'section', title: 'h3' }".

Items

You can display logos in two ways:

  1. Using the items prop to provide a list of logos. Each item can be either:
  • An icon name (e.g. i-simple-icons-github)
  • An object containing src and alt properties for images, which will be utilized in a PAvatar component
  1. Using the default slot to have complete control over the content

Trusted by the best front-end teams

<script setup lang="ts">
const items = [
  'i-simple-icons-github',
  'i-simple-icons-discord',
  'i-simple-icons-x',
  'i-simple-icons-instagram',
  'i-simple-icons-linkedin',
  'i-simple-icons-facebook',
];
</script>

<template>
  <PPageLogos
    title="Trusted by the best front-end teams"
    :items="items"
  />
</template>

Marquee

Use the marquee prop to enable a marquee effect for the logos.

Trusted by the best front-end teams

<template>
  <PPageLogos
    title="Trusted by the best front-end teams"
    marquee
    :items="[
      'i-simple-icons-github',
      'i-simple-icons-discord',
      'i-simple-icons-x',
      'i-simple-icons-instagram',
      'i-simple-icons-linkedin',
      'i-simple-icons-facebook'
    ]"
  />
</template>
When you use marquee mode, you can customize its behavior by passing props. For more info, check out the Marquee component.

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

title
string
items
PageLogosItem[]
marquee
boolean | MarqueeProps
ui
{ root?: SlotClass; title?: SlotClass; logos?: SlotClass; logo?: SlotClass; }

Slots

Slot Type
default
{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    pageLogos: {
      slots: {
        root: 'relative overflow-hidden',
        title: 'text-lg text-center font-600 color-text-highlighted',
        logos: 'mt-10',
        logo: 'size-10 shrink-0'
      },
      variants: {
        marquee: {
          false: {
            logos: 'flex shrink-0 gap-$gap [--gap:calc(var(--spacing)*16)] items-center justify-around'
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageLogos: {
          slots: {
            root: 'relative overflow-hidden',
            title: 'text-lg text-center font-600 color-text-highlighted',
            logos: 'mt-10',
            logo: 'size-10 shrink-0'
          },
          variants: {
            marquee: {
              false: {
                logos: 'flex shrink-0 gap-$gap [--gap:calc(var(--spacing)*16)] items-center justify-around'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageList

A vertical list layout for displaying content in a stacked format.

PageSection

A responsive section for your pages.