Case Studies — Results Strip

Installation

Variants

Schema

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

interface CaseStudyStripResult {
  wordmark: string
  metric: string
  label: string
}

Files installed (2)

• src/app/components/blocks/case-study-results-strip/case-study-results-strip.component.ts3 kB

  Copy

  // Compact proof band pairing each customer wordmark with its single headline result,
  // sized for the gap between a feature section and a pricing table. Port of the React
  // block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  export interface CaseStudyStripResult {
    wordmark: string
    metric: string
    label: string
  }
  
  // One result per customer. A second number halves the weight of the first.
  const defaultResults: CaseStudyStripResult[] = [
    { wordmark: 'Northwind', metric: '5 days', label: 'off the monthly close' },
    { wordmark: 'Halden', metric: '71%', label: 'fewer ad-hoc requests' },
    { wordmark: 'Verity', metric: '2.4pp', label: 'tighter forecast band' },
    { wordmark: 'Calder', metric: '11 → 1', label: 'reporting spreadsheets' },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-case-study-results-strip, [ui-case-study-results-strip]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],
    template: `
      <section data-slot="case-study-results-strip" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-10">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <span ui-badge variant="secondary">Proven</span>
            <button ui-button variant="link" class="h-auto p-0 text-sm">
              All case studies
              <lucide-icon [img]="ArrowRight" class="ml-1.5 size-3.5" aria-hidden="true" />
            </button>
          </div>
  
          <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4 lg:gap-0">
            @for (result of results; track result.wordmark; let last = $last) {
              <div class="relative lg:px-6 lg:first:pl-0">
                <p class="text-sm font-semibold tracking-[0.18em] uppercase">{{ result.wordmark }}</p>
                <p class="font-display mt-3 text-3xl font-bold tracking-tight">{{ result.metric }}</p>
                <p class="text-muted-foreground mt-1 text-sm">{{ result.label }}</p>
  
                @if (!last) {
                  <ui-separator orientation="vertical" class="absolute top-0 right-0 hidden h-full lg:block" />
                }
              </div>
            }
          </div>
        </div>
      </section>
    `,
  })
  export class UiCaseStudyResultsStripComponent {
    protected readonly ArrowRight = ArrowRight
  
    @Input() results: CaseStudyStripResult[] = defaultResults.map((r) => ({ ...r }))
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('border-border bg-card border-y', this.className)
    }
  }
  

• src/app/components/blocks/case-study-results-strip/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/case-study-results-strip.json