Features — Dense Icon List

Installation

Variants

Schema

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

interface DenseCapability {
  icon: LucideIconData
  title: string
  body: string
}

Files installed (2)

• src/app/components/blocks/features-icon-list-dense/features-icon-list-dense.component.ts4.1 kB

  Copy

  // Compact three-column list of twelve capabilities with small icons and one-line
  // descriptions, for the lower half of a landing page where breadth matters more than
  // depth. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import {
    ArrowRight,
    Bell,
    Boxes,
    Clock,
    Download,
    FileSearch,
    GitBranch,
    Globe,
    KeyRound,
    Lock,
    LucideAngularModule,
    Receipt,
    Share2,
    Terminal,
    type LucideIconData,
  } 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 DenseCapability {
    icon: LucideIconData
    title: string
    body: string
  }
  
  const defaultCapabilities: DenseCapability[] = [
    { icon: GitBranch, title: 'Version control', body: 'Every definition change is a reviewable diff.' },
    { icon: Lock, title: 'Row-level scope', body: 'Resolved per query from your IdP.' },
    { icon: KeyRound, title: 'SSO + SCIM', body: 'Okta, Entra ID, and Google Workspace.' },
    { icon: Clock, title: 'Freshness policy', body: 'Per-metric materialisation schedules.' },
    { icon: Receipt, title: 'Cost ceilings', body: 'Query budgets enforced per team.' },
    { icon: Bell, title: 'Drift alerts', body: 'Threshold and anomaly triggers.' },
    { icon: FileSearch, title: 'Audit export', body: 'Generated from change history.' },
    { icon: Share2, title: 'Scoped sharing', body: 'Signed links that respect permissions.' },
    { icon: Boxes, title: 'Embedding', body: 'Same dashboards inside your product.' },
    { icon: Terminal, title: 'CLI + API', body: 'Everything the UI does, scriptable.' },
    { icon: Download, title: 'Exports', body: 'CSV, Parquet, and scheduled delivery.' },
    { icon: Globe, title: 'Data residency', body: 'EU, US, and AU regions available.' },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-features-icon-list-dense, [ui-features-icon-list-dense]',
    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-icon-list-dense" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-24">
          <div class="flex flex-wrap items-end justify-between gap-6">
            <div class="max-w-2xl">
              <span ui-badge variant="secondary">Also included</span>
              <h2 class="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">The rest of the surface area</h2>
              <p class="text-muted-foreground mt-2">
                The detail sections above cover the hard parts. This is everything else, in one pass.
              </p>
            </div>
            <button ui-button variant="ghost">
              Full feature list
              <lucide-icon [img]="ArrowRight" class="ml-2 size-4" aria-hidden="true" />
            </button>
          </div>
  
          <ui-separator class="my-10" />
  
          <ul class="grid gap-x-10 gap-y-7 sm:grid-cols-2 lg:grid-cols-3">
            @for (capability of capabilities; track capability.title) {
              <li class="flex gap-3">
                <lucide-icon
                  [img]="capability.icon"
                  class="text-muted-foreground mt-0.5 size-4 shrink-0"
                  aria-hidden="true"
                />
                <div class="min-w-0">
                  <p class="text-sm font-medium">{{ capability.title }}</p>
                  <p class="text-muted-foreground mt-0.5 text-xs leading-relaxed">{{ capability.body }}</p>
                </div>
              </li>
            }
          </ul>
        </div>
      </section>
    `,
  })
  export class UiFeaturesIconListDenseComponent {
    protected readonly ArrowRight = ArrowRight
  
    @Input() capabilities: DenseCapability[] = defaultCapabilities.map((c) => ({ ...c }))
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/features-icon-list-dense/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/features-icon-list-dense.json