Case Study

blockmarketing

Customer-proof set pairing a featured split story with a sticky results panel, a filterable story index, three-up metric cards, a before-and-after metric comparison table, and a compact results strip.

Installation

$pnpm dlx uipkge-ng@latest add case-study

$npx uipkge-ng@latest add case-study

$yarn dlx uipkge-ng@latest add case-study

$bunx uipkge-ng@latest add case-study

Manifest:https://uipkge.dev/r/angular/case-study.jsonInstalls to:src/app/components/blocks/case-study/

Variants

Loading interactive previews…

Schema

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

FeaturedResult

interface FeaturedResult {
  value: string
  label: string
}

CompanyFact

interface CompanyFact {
  term: string
  detail: string
}

StoryIndexItem

interface StoryIndexItem {
  company: string
  industry: string
  result: string
  stack: string
  readTime: string
}

MetricCardStudy

interface MetricCardStudy {
  metric: string
  metricLabel: string
  company: string
  industry: string
  outcome: string
  quote: string
  author: { name: string; role: string; initials: string }
}

ComparisonMetric

interface ComparisonMetric {
  name: string
  before: string
  after: string
  delta: string
  better: 'up' | 'down'
}

StripResult

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

npm dependencies

lucide-angular

Includes

avatar badge button card separator table toggle-group

Files installed (2)

src/app/components/blocks/case-study/case-study.component.ts25 kB

// Customer-proof set pairing a featured split story with a sticky results panel, a
// filterable story index, three-up metric cards, a before-and-after metric comparison
// table, and a compact results strip. Port of the React block 1:1.
//
// The five sections ship as five standalone components (one per install file in the
// Vue/React blocks) plus a `UiCaseStudyComponent` wrapper that stacks the full set.
import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'
import { ArrowRight, ArrowUpRight, LucideAngularModule, Quote, TrendingDown, TrendingUp } from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'
import {
  UiTableBodyComponent,
  UiTableCellComponent,
  UiTableComponent,
  UiTableHeadComponent,
  UiTableHeaderComponent,
  UiTableRowComponent,
} from '@/ui/table/table.component'
import { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'

// ---------------------------------------------------------------- Featured story

interface FeaturedResult {
  value: string
  label: string
}

interface CompanyFact {
  term: string
  detail: string
}

const featuredResults: FeaturedResult[] = [
  { value: '5 days', label: 'off the monthly close' },
  { value: '11 → 1', label: 'reconciliation spreadsheets' },
  { value: '340', label: 'certified metrics published' },
  { value: '6 weeks', label: 'kickoff to full hand-over' },
]

const companyFacts: CompanyFact[] = [
  { term: 'Industry', detail: 'Freight forwarding' },
  { term: 'Size', detail: '1,200 staff · 18 countries' },
  { term: 'Stack', detail: 'Snowflake · dbt · Okta' },
  { term: 'Live since', detail: 'Q1 2026' },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-case-study-featured-story, [ui-case-study-featured-story]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiAvatarComponent,
    UiAvatarFallbackComponent,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiSeparatorComponent,
  ],
  template: `
    <section data-slot="case-study-featured-story" [class]="rootClass">
      <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
        <div class="grid gap-12 lg:grid-cols-[1.4fr_1fr] lg:gap-16">
          <article>
            <span ui-badge variant="secondary">Case study</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              How Northwind Logistics closed the books five days early
            </h2>

            <div class="mt-8 space-y-8">
              <div>
                <h3 class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">The challenge</h3>
                <p class="mt-2.5 leading-relaxed">
                  Month-end ran on eleven spreadsheets maintained by four people across three time zones. Every close
                  opened with a reconciliation pass nobody had budgeted for, and restatements were tracked in email.
                </p>
              </div>

              <div>
                <h3 class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">The approach</h3>
                <p class="mt-2.5 leading-relaxed">
                  We mirrored the warehouse schema, rebuilt revenue and margin as versioned definitions, and reconciled
                  them against the prior four quarters before anything was published. A single regional team piloted the
                  first close; the rest of finance moved over two weeks later.
                </p>
              </div>

              <div>
                <h3 class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">The result</h3>
                <p class="mt-2.5 leading-relaxed">
                  Close now starts from a reconciled position. Restatements open a reviewable change instead of a
                  thread, and the audit pack is generated from the same history.
                </p>
              </div>
            </div>

            <figure class="border-border mt-10 border-l-2 pl-6">
              <lucide-icon [img]="Quote" class="text-muted-foreground/60 size-5" />
              <blockquote class="mt-3 text-lg leading-snug font-medium text-balance">
                We stopped arguing about whose number was right and started arguing about what to do next. That is the
                whole change, and it was worth the six weeks.
              </blockquote>
              <figcaption class="mt-5 flex items-center gap-3">
                <ui-avatar class="size-9">
                  <ui-avatar-fallback class="text-xs">EW</ui-avatar-fallback>
                </ui-avatar>
                <div>
                  <p class="text-sm font-medium">Erin Walsh</p>
                  <p class="text-muted-foreground text-xs">VP Finance, Northwind Logistics</p>
                </div>
              </figcaption>
            </figure>

            <button ui-button class="mt-10">
              Read the full story
              <lucide-icon [img]="ArrowRight" class="ml-2 size-4" />
            </button>
          </article>

          <!-- Sticky results panel: keeps the numbers in view while the narrative scrolls. -->
          <aside class="lg:sticky lg:top-24 lg:self-start">
            <div ui-card>
              <div ui-card-content class="p-6">
                <h3 class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">Results</h3>
                <dl class="mt-5 grid grid-cols-2 gap-x-4 gap-y-6">
                  @for (result of results; track result.label) {
                    <div>
                      <dt class="sr-only">{{ result.label }}</dt>
                      <dd>
                        <span class="font-display block text-2xl font-bold tracking-tight">{{ result.value }}</span>
                        <span class="text-muted-foreground mt-1 block text-xs leading-snug">{{ result.label }}</span>
                      </dd>
                    </div>
                  }
                </dl>

                <ui-separator class="my-6" />

                <dl class="space-y-3">
                  @for (fact of facts; track fact.term) {
                    <div class="flex items-baseline justify-between gap-4 text-sm">
                      <dt class="text-muted-foreground">{{ fact.term }}</dt>
                      <dd class="text-right font-medium">{{ fact.detail }}</dd>
                    </div>
                  }
                </dl>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  `,
})
export class UiCaseStudyFeaturedStorySectionComponent {
  protected readonly ArrowRight = ArrowRight
  protected readonly Quote = Quote

  protected readonly results = featuredResults
  protected readonly facts = companyFacts

  @Input('class') className?: string

  get rootClass(): string {
    return cn('bg-background', this.className)
  }
}

// ------------------------------------------------------------ Filterable list

interface StoryIndexItem {
  company: string
  industry: string
  result: string
  stack: string
  readTime: string
}

const storyIndex: StoryIndexItem[] = [
  {
    company: 'Northwind Logistics',
    industry: 'Logistics',
    result: '5 days off the monthly close',
    stack: 'Snowflake · dbt · Okta',
    readTime: '8 min',
  },
  {
    company: 'Halden Health',
    industry: 'Healthcare',
    result: '71% fewer ad-hoc data requests',
    stack: 'BigQuery · Airflow',
    readTime: '6 min',
  },
  {
    company: 'Verity Retail Group',
    industry: 'Retail',
    result: '2.4pp tighter forecast band',
    stack: 'Redshift · dbt',
    readTime: '7 min',
  },
  {
    company: 'Calder Manufacturing',
    industry: 'Manufacturing',
    result: '11 spreadsheets retired',
    stack: 'Postgres · Dagster',
    readTime: '5 min',
  },
  {
    company: 'Ridgeway Freight',
    industry: 'Logistics',
    result: 'Per-shipment landed cost',
    stack: 'Snowflake · Fivetran',
    readTime: '9 min',
  },
  {
    company: 'Ashford Clinics',
    industry: 'Healthcare',
    result: 'PHI-scoped self-serve reporting',
    stack: 'BigQuery · Entra ID',
    readTime: '6 min',
  },
]

const ALL_INDUSTRIES = 'All'

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-case-study-filterable-list, [ui-case-study-filterable-list]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiSeparatorComponent,
    UiToggleGroupComponent,
    UiToggleGroupItemComponent,
  ],
  template: `
    <section data-slot="case-study-filterable-list" [class]="rootClass">
      <div class="mx-auto max-w-4xl px-6 py-20 lg:py-28">
        <div class="flex flex-wrap items-end justify-between gap-6">
          <div>
            <span ui-badge variant="secondary">Customer stories</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Read one close to your own</h2>
          </div>

          <div
            ui-toggle-group
            type="single"
            variant="outline"
            size="sm"
            class="flex-nowrap overflow-x-auto"
            aria-label="Filter case studies by industry"
            [value]="active()"
            (valueChange)="onChange($event)"
          >
            @for (industry of industries(); track industry) {
              <button ui-toggle-group-item [value]="industry">{{ industry }}</button>
            }
          </div>
        </div>

        <div ui-card class="mt-8">
          <div ui-card-content class="p-2">
            @if (visible().length === 0) {
              <div class="px-4 py-16 text-center">
                <p class="text-sm font-medium">No stories in that industry yet.</p>
                <button ui-button variant="outline" size="sm" class="mt-4" (click)="active.set(allLabel)">
                  Show all
                </button>
              </div>
            } @else {
              <ul>
                @for (study of visible(); track study.company; let last = $last) {
                  <li>
                    <a
                      href="#"
                      class="hover:bg-muted focus-visible:ring-ring group flex items-center gap-4 rounded-lg p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                    >
                      <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2">
                          <p class="text-sm font-semibold">{{ study.company }}</p>
                          <span ui-badge variant="outline">{{ study.industry }}</span>
                        </div>
                        <p class="mt-1 text-sm">{{ study.result }}</p>
                        <p class="text-muted-foreground mt-1 font-mono text-xs">{{ study.stack }}</p>
                      </div>
                      <span class="text-muted-foreground shrink-0 text-xs">{{ study.readTime }}</span>
                      <lucide-icon
                        [img]="ArrowUpRight"
                        class="text-muted-foreground size-4 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
                      />
                    </a>
                    @if (!last) {
                      <ui-separator />
                    }
                  </li>
                }
              </ul>
            }
          </div>
        </div>
      </div>
    </section>
  `,
})
export class UiCaseStudyFilterableListComponent {
  protected readonly ArrowUpRight = ArrowUpRight
  protected readonly allLabel = ALL_INDUSTRIES

  @Input('class') className?: string

  readonly active = signal<string>(ALL_INDUSTRIES)

  readonly industries = computed(() => [ALL_INDUSTRIES, ...new Set(storyIndex.map((study) => study.industry))])
  readonly visible = computed(() =>
    this.active() === ALL_INDUSTRIES ? storyIndex : storyIndex.filter((study) => study.industry === this.active()),
  )

  get rootClass(): string {
    return cn('bg-background', this.className)
  }

  // Single-select emits '' when the pressed chip is pressed again; fall back to
  // ALL so the list is never empty by accident.
  onChange(value: unknown): void {
    this.active.set(typeof value === 'string' && value ? value : ALL_INDUSTRIES)
  }
}

// --------------------------------------------------------------- Metric cards

interface MetricCardStudy {
  metric: string
  metricLabel: string
  company: string
  industry: string
  outcome: string
  quote: string
  author: { name: string; role: string; initials: string }
}

const metricCardStudies: MetricCardStudy[] = [
  {
    metric: '5 days',
    metricLabel: 'off the monthly close',
    company: 'Northwind Logistics',
    industry: 'Freight forwarding · 1,200 staff',
    outcome: 'Replaced eleven reconciliation spreadsheets with one certified revenue model.',
    quote: 'We stopped arguing about whose number was right and started arguing about what to do next.',
    author: { name: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },
  },
  {
    metric: '71%',
    metricLabel: 'fewer ad-hoc data requests',
    company: 'Halden Health',
    industry: 'Provider network · 40 clinics',
    outcome: 'Clinic leads self-serve their own quality metrics without filing a ticket.',
    quote: 'The analytics team went from a request queue to actually building things again.',
    author: { name: 'Daniel Brooks', role: 'Head of Analytics', initials: 'DB' },
  },
  {
    metric: '2.4pp',
    metricLabel: 'tighter forecast accuracy',
    company: 'Verity Retail Group',
    industry: 'Omnichannel retail · 310 stores',
    outcome: 'Sales and finance now forecast off the same pipeline definition, snapshotted weekly.',
    quote: 'Forecast review stopped opening with twenty minutes of reconciling two decks.',
    author: { name: 'Priya Raman', role: 'RevOps Director', initials: 'PR' },
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-case-study-metric-cards, [ui-case-study-metric-cards]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiAvatarComponent,
    UiAvatarFallbackComponent,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiSeparatorComponent,
  ],
  template: `
    <section data-slot="case-study-metric-cards" [class]="rootClass">
      <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
        <div class="flex flex-wrap items-end justify-between gap-6">
          <div class="max-w-2xl">
            <span ui-badge variant="secondary">Customer results</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">What changed after the rollout</h2>
            <p class="text-muted-foreground mt-3 text-lg">
              Three teams, measured against their own numbers from the quarter before.
            </p>
          </div>
          <button ui-button variant="outline">All case studies</button>
        </div>

        <div class="mt-10 grid gap-4 md:grid-cols-3">
          @for (study of studies; track study.company) {
            <div ui-card class="group">
              <div ui-card-content class="flex h-full flex-col p-6">
                <!-- Metric leads: it is the only part that survives a skim. -->
                <p class="font-display text-4xl font-bold tracking-tight">{{ study.metric }}</p>
                <p class="text-muted-foreground mt-1 text-sm">{{ study.metricLabel }}</p>

                <ui-separator class="my-5" />

                <p class="text-sm font-semibold">{{ study.company }}</p>
                <p class="text-muted-foreground mt-0.5 text-xs">{{ study.industry }}</p>
                <p class="mt-4 text-sm leading-relaxed">{{ study.outcome }}</p>

                <blockquote class="border-border text-muted-foreground mt-5 border-l-2 pl-4 text-sm italic">
                  &ldquo;{{ study.quote }}&rdquo;
                </blockquote>

                <div class="mt-auto flex items-center gap-3 pt-6">
                  <ui-avatar class="size-8">
                    <ui-avatar-fallback class="text-xs">{{ study.author.initials }}</ui-avatar-fallback>
                  </ui-avatar>
                  <div class="min-w-0">
                    <p class="truncate text-sm font-medium">{{ study.author.name }}</p>
                    <p class="text-muted-foreground truncate text-xs">{{ study.author.role }}</p>
                  </div>
                  <button
                    ui-button
                    variant="ghost"
                    size="icon"
                    class="ml-auto"
                    [attr.aria-label]="'Read the ' + study.company + ' case study'"
                  >
                    <lucide-icon
                      [img]="ArrowUpRight"
                      class="size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
                    />
                  </button>
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    </section>
  `,
})
export class UiCaseStudyMetricCardsComponent {
  protected readonly ArrowUpRight = ArrowUpRight
  protected readonly studies = metricCardStudies

  @Input('class') className?: string

  get rootClass(): string {
    return cn('bg-background', this.className)
  }
}

// ---------------------------------------------------------- Metric comparison

interface ComparisonMetric {
  name: string
  before: string
  after: string
  delta: string
  better: 'up' | 'down'
}

// `better` records which direction is good, so the delta colour never has to be
// hard-coded per row — a falling close time is good, falling accuracy is not.
const comparisonMetrics: ComparisonMetric[] = [
  { name: 'Days to close', before: '9.4', after: '4.2', delta: '−55%', better: 'down' },
  { name: 'Ad-hoc data requests / month', before: '212', after: '61', delta: '−71%', better: 'down' },
  { name: 'Certified metrics published', before: '0', after: '340', delta: '+340', better: 'up' },
  { name: 'Forecast accuracy band', before: '±6.1pp', after: '±3.7pp', delta: '−2.4pp', better: 'down' },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-case-study-metric-comparison, [ui-case-study-metric-comparison]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiSeparatorComponent,
    UiTableBodyComponent,
    UiTableCellComponent,
    UiTableComponent,
    UiTableHeadComponent,
    UiTableHeaderComponent,
    UiTableRowComponent,
  ],
  template: `
    <section data-slot="case-study-metric-comparison" [class]="rootClass">
      <div class="mx-auto max-w-4xl px-6 py-20 lg:py-28">
        <span ui-badge variant="secondary">Northwind Logistics</span>
        <h2 class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
          Two quarters either side of the rollout
        </h2>
        <p class="text-muted-foreground mt-3 text-lg">
          Their numbers, their definitions, measured the same way before and after. Nothing normalised.
        </p>

        <div ui-card class="mt-8">
          <div ui-card-content class="p-0">
            <table ui-table>
              <thead ui-table-header>
                <tr ui-table-row>
                  <th ui-table-head>Metric</th>
                  <th ui-table-head class="text-right">Q4 2025</th>
                  <th ui-table-head class="text-right">Q2 2026</th>
                  <th ui-table-head class="text-right">Change</th>
                </tr>
              </thead>
              <tbody ui-table-body>
                @for (metric of metrics; track metric.name) {
                  <tr ui-table-row>
                    <td ui-table-cell class="font-medium">{{ metric.name }}</td>
                    <td ui-table-cell class="text-muted-foreground text-right font-mono text-sm">
                      {{ metric.before }}
                    </td>
                    <td ui-table-cell class="text-right font-mono text-sm font-semibold">{{ metric.after }}</td>
                    <td ui-table-cell class="text-right">
                      <span class="text-success inline-flex items-center gap-1.5 font-mono text-sm">
                        @if (metric.better === 'down') {
                          <lucide-icon [img]="TrendingDown" class="size-3.5" />
                        } @else {
                          <lucide-icon [img]="TrendingUp" class="size-3.5" />
                        }
                        {{ metric.delta }}
                      </span>
                    </td>
                  </tr>
                }
              </tbody>
            </table>

            <ui-separator />

            <p class="text-muted-foreground px-6 py-4 text-xs leading-relaxed">
              Measured from their own close calendar and ticket queue. The rollout completed between the two quarters;
              no headcount was added or removed in finance during the period.
            </p>
          </div>
        </div>

        <button ui-button class="mt-8">
          Read how they did it
          <lucide-icon [img]="ArrowRight" class="ml-2 size-4" />
        </button>
      </div>
    </section>
  `,
})
export class UiCaseStudyMetricComparisonComponent {
  protected readonly ArrowRight = ArrowRight
  protected readonly TrendingDown = TrendingDown
  protected readonly TrendingUp = TrendingUp
  protected readonly metrics = comparisonMetrics

  @Input('class') className?: string

  get rootClass(): string {
    return cn('bg-background', this.className)
  }
}

// --------------------------------------------------------------- Results strip

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

// One result per customer. A second number halves the weight of the first.
const stripResults: StripResult[] = [
  { 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,
  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" />
          </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
  protected readonly results = stripResults

  @Input('class') className?: string

  get rootClass(): string {
    return cn('border-border bg-card border-y', this.className)
  }
}

// ------------------------------------------------------------------ Full stack

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-case-study, [ui-case-study]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [
    UiCaseStudyFeaturedStorySectionComponent,
    UiCaseStudyFilterableListComponent,
    UiCaseStudyMetricCardsComponent,
    UiCaseStudyMetricComparisonComponent,
    UiCaseStudyResultsStripComponent,
  ],
  template: `
    <div data-slot="case-study" [class]="rootClass">
      <ui-case-study-featured-story />
      <ui-case-study-filterable-list />
      <ui-case-study-metric-cards />
      <ui-case-study-metric-comparison />
      <ui-case-study-results-strip />
    </div>
  `,
})
export class UiCaseStudyComponent {
  @Input('class') className?: string

  get rootClass(): string {
    return cn('w-full', this.className)
  }
}

src/app/components/blocks/case-study/index.ts0.3 kB

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

Change language