Features — Checklist Split

Installation

Variants

Schema

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

interface ChecklistCapability {
  label: string
  detail: string
}

Files installed (2)

• src/app/components/blocks/features-checklist-split/features-checklist-split.component.ts4 kB

  Copy

  // Two-column feature section pairing a sticky pitch column with a dense two-up
  // checklist of capabilities, each line carrying a short qualifier rather than a
  // marketing adjective. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, Check, 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 ChecklistCapability {
    label: string
    detail: string
  }
  
  const defaultCapabilities: ChecklistCapability[] = [
    { label: 'Versioned metric definitions', detail: 'Git-backed, reviewable' },
    { label: 'Row-level access control', detail: 'Evaluated per query' },
    { label: 'Warehouse pass-through', detail: 'No data copied out' },
    { label: 'Scheduled materialisation', detail: 'Per-metric freshness' },
    { label: 'SCIM + SAML provisioning', detail: 'Okta, Entra, Google' },
    { label: 'Audit log export', detail: 'Generated from history' },
    { label: 'Cost ceilings per team', detail: 'Enforced at query time' },
    { label: 'Embedded dashboards', detail: 'Signed URLs, scoped' },
    { label: 'Period locking', detail: 'Restatements tracked' },
    { label: 'Alerting on drift', detail: 'Threshold or anomaly' },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-features-checklist-split, [ui-features-checklist-split]',
    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="features-checklist-split" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
          <div class="grid gap-12 lg:grid-cols-[1fr_1.4fr] lg:gap-16">
            <!-- Sticky pitch: stays put while the longer checklist scrolls past. -->
            <div class="lg:sticky lg:top-24 lg:self-start">
              <span ui-badge variant="secondary">Capabilities</span>
              <h2 class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
                Everything the reporting layer needs, nothing it doesn’t
              </h2>
              <p class="text-muted-foreground mt-3 leading-relaxed">
                No add-on tiers and no feature gates between plans. The list on the right is the product.
              </p>
              <button ui-button class="mt-6">
                Compare plans
                <lucide-icon [img]="ArrowRight" class="ml-2 size-4" aria-hidden="true" />
              </button>
            </div>
  
            <div>
              <ul class="grid gap-x-8 sm:grid-cols-2">
                @for (capability of capabilities; track capability.label) {
                  <li class="py-3">
                    <div class="flex items-start gap-3">
                      <lucide-icon [img]="Check" class="text-primary mt-0.5 size-4 shrink-0" aria-hidden="true" />
                      <div class="min-w-0">
                        <p class="text-sm font-medium">{{ capability.label }}</p>
                        <p class="text-muted-foreground mt-0.5 text-xs">{{ capability.detail }}</p>
                      </div>
                    </div>
                    <ui-separator class="mt-3" />
                  </li>
                }
              </ul>
              <p class="text-muted-foreground mt-6 text-xs">
                Every capability is available on every plan. Limits differ, features do not.
              </p>
            </div>
          </div>
        </div>
      </section>
    `,
  })
  export class UiFeaturesChecklistSplitComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly Check = Check
  
    @Input() capabilities: ChecklistCapability[] = defaultCapabilities.map((c) => ({ ...c }))
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/features-checklist-split/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/features-checklist-split.json