UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Logo Clouds

blockmarketing
Boilerplate repo

Logo-cloud section set: a static trusted-by grid, single- and tri-row infinite marquees, a categorized filter grid with testimonial modal, a grayscale-hover wall, and a ticker with sector filters and telemetry hover cards.

Installation

$npx uipkge-ng@latest add logos
Manifest:https://uipkge.dev/r/angular/logos.jsonInstalls to:src/app/components/blocks/logos/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

CustomerLogo
interface CustomerLogo {
  label: string
  d: string
}
CustomerEntity
interface CustomerEntity {
  id: string
  name: string
  category: CustomerCategory
  tier: string
  scale: string
  quote: string
  author: string
  title: string
}
CategoryMeta
interface CategoryMeta {
  key: VerticalCategory
  label: string
  icon: LucideIconData
}
BrandPartner
interface BrandPartner {
  id: string
  name: string
  category: TickerCategory
  role: string
  metric: string
  region: string
}

npm dependencies

lucide-angular

Files installed (7)

  • src/app/components/blocks/logos/logos-01.component.ts5.4 kB
    // Static trusted-by logo grid: "Trusted by teams at" eyebrow over a responsive
// grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is
// an inline SVG on currentColor so the muted-foreground to foreground hover swap
// works. Port of the Vue/React block 1:1 — swap the SVGs for real customer logos.
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { cn } from '@/lib/utils'

interface CustomerLogo {
  label: string
  d: string
}

// Sample logo set sourced from simpleicons.org (MIT). Swap these paths and
// labels for your own customer logos before shipping.
const LOGOS: CustomerLogo[] = [
  {
    label: 'Vercel',
    d: 'm12 1.608 12 20.784H0Z',
  },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-logos-01, [ui-logos-01]',
  standalone: true,
  // The block renders its own root <section>: keep the host out of layout.
  host: { '[attr.class]': '"contents"' },
  template: `
    <section data-slot="logos-01" [class]="rootClass">
      <div class="mx-auto max-w-6xl px-6 py-14">
        <p class="text-muted-foreground text-center text-xs font-medium tracking-widest uppercase">
          Trusted by teams at
        </p>
        <div
          class="mt-10 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-6"
        >
          @for (logo of logos; track logo.label) {
            <div class="text-foreground/55 hover:text-foreground inline-flex items-center gap-2 transition-colors">
              <svg
                viewBox="0 0 24 24"
                class="size-5 shrink-0"
                fill="currentColor"
                role="img"
                [attr.aria-label]="logo.label"
              >
                <title>{{ logo.label }}</title>
                <path [attr.d]="logo.d" />
              </svg>
              <span class="text-base font-semibold tracking-tight">{{ logo.label }}</span>
            </div>
          }
        </div>
      </div>
    </section>
  `,
})
export class UiLogos01Component {
  protected readonly logos = LOGOS

  @Input('class') className?: string

  get rootClass(): string {
    return cn('bg-muted/30 border-y', this.className)
  }
}
  • src/app/components/blocks/logos/logos-02.component.ts6.2 kB
  • src/app/components/blocks/logos/logos-03.component.ts15.6 kB
  • src/app/components/blocks/logos/logo-cloud-categorized-grid.component.ts13.6 kB
  • src/app/components/blocks/logos/logo-cloud-grayscale.component.ts2.6 kB
  • src/app/components/blocks/logos/logo-ticker-infinite.component.ts9.7 kB
  • src/app/components/blocks/logos/index.ts0.6 kB

Raw manifest:https://uipkge.dev/r/angular/logos.json