Logo Cloud — Grayscale Hover

Installation

Variants

Schema

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

interface HTMLElementTagNameMap {
    'uip-logo-cloud-grayscale': UipLogoCloudGrayscale
  }
}

Files installed (1)

• src/uip/blocks/logo-cloud-grayscale/logo-cloud-grayscale.ts3 kB

  Copy

  import { LitElement, css, html } from 'lit'
  import { tailwind } from '../../lib/styles'
  import { ThemeController } from '../../lib/theme'
  // Side-effect imports: register the composed elements for standalone use
  // (consumers who install only this block still get working primitives).
  import '../../components/badge/badge'
  import '../../components/button/button'
  import '../../components/separator/separator'
  
  const customers = [
    'Northwind',
    'Halden',
    'Verity',
    'Calder',
    'Ridgeway',
    'Ashford',
    'Brightmoor',
    'Kesteven',
    'Marlowe',
    'Thornbury',
    'Wexley',
    'Alderton',
  ]
  
  /**
   * <uip-logo-cloud-grayscale> — the registry LogoCloudGrayscale block as a web component.
   *
   * Class strings are React's LogoCloudGrayscale verbatim. The section is
   * static (React holds no state).
   */
  export class UipLogoCloudGrayscale extends LitElement {
    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
    // :host display can't be a utility class (the host has no template of its own).
    static styles = [tailwind, css`:host { display: block; }`]
  
    constructor() {
      super()
      new ThemeController(this)
    }
  
    connectedCallback() {
      super.connectedCallback()
      this.setAttribute('data-uipkge', '')
      this.setAttribute('data-slot', 'logo-cloud-grayscale')
    }
  
    render() {
      return html`
        <section data-slot="logo-cloud-grayscale" class="bg-background">
          <div class="mx-auto max-w-6xl px-6 py-16">
            <div class="text-center">
              <uip-badge variant="secondary">Customers</uip-badge>
              <p class="mt-4 text-lg font-medium">Running the close at 240 companies</p>
              <p class="text-muted-foreground mt-1.5 text-sm">
                Freight, healthcare, retail, and manufacturing · median 1,100 staff
              </p>
            </div>
  
            <ul class="mt-10 grid grid-cols-2 gap-x-8 gap-y-6 sm:grid-cols-3 lg:grid-cols-6">
              ${customers.map(
                (customer) => html`
                  <li class="flex items-center justify-center">
                    <span
                      class="text-muted-foreground/60 hover:text-foreground cursor-default text-sm font-semibold tracking-[0.18em] uppercase transition-colors"
                    >
                      ${customer}
                    </span>
                  </li>
                `,
              )}
            </ul>
  
            <uip-separator class="[&::part(base)]:my-10"></uip-separator>
  
            <div class="flex flex-wrap items-center justify-center gap-4 text-center">
              <p class="text-muted-foreground text-sm">Six of the ten largest UK freight forwarders.</p>
              <uip-button variant="link" class="h-auto p-0 text-sm">Read their stories</uip-button>
            </div>
          </div>
        </section>
      `
    }
  }
  
  customElements.get('uip-logo-cloud-grayscale') ||
    customElements.define('uip-logo-cloud-grayscale', UipLogoCloudGrayscale)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-logo-cloud-grayscale': UipLogoCloudGrayscale
    }
  }
  

Raw manifest:https://uipkge.dev/r/lit/logo-cloud-grayscale.json