ArcaneFeatureShowcase#

A complete section component that wraps ArcaneFlexiCards with a title, subtitle, and proper layout. Perfect for landing pages and marketing sections.

Basic Usage#

ArcaneFeatureShowcase(
  title: 'Why Choose Us?',
  subtitle: 'Hover over any card to learn more.',
  items: [
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.server(size: IconSize.xl),
      title: 'Fast Servers',
      description: 'Enterprise-grade hardware with NVMe SSDs.',
    ),
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.shield(size: IconSize.xl),
      title: 'DDoS Protection',
      description: 'Multi-layer protection against attacks.',
    ),
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.zap(size: IconSize.xl),
      title: 'Low Latency',
      description: 'Optimized routing for minimal ping.',
    ),
  ],
)

Properties#

ArcaneFeatureShowcaseItem Properties#

With Footer Links#

ArcaneFeatureShowcase(
  title: 'Our Services',
  subtitle: 'Everything you need to succeed.',
  items: [
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.server(size: IconSize.xl),
      title: 'Enterprise Hardware',
      description: 'High-performance processors and NVMe storage.',
      footer: const ArcaneArrowLink(label: 'View specs'),
    ),
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.shield(size: IconSize.xl),
      title: 'Security',
      description: 'Enterprise-grade protection included.',
      footer: const ArcaneArrowLink(label: 'Learn more'),
    ),
  ],
)

Custom Styling#

ArcaneFeatureShowcase(
  title: 'Premium Features',
  subtitle: 'Available on all plans.',
  background: 'var(--arcane-surface-variant)',
  centerHeader: false,  // Left-align header
  expandedFlex: 3.0,
  gap: '32px',
  items: [...],
)

With Header Badges#

ArcaneFeatureShowcase(
  title: 'Pricing Plans',
  items: [
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.rocket(size: IconSize.xl),
      title: 'Starter',
      description: 'For small projects.',
      header: const ArcaneBadge(label: 'Free'),
    ),
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.star(size: IconSize.xl),
      title: 'Pro',
      description: 'For growing teams.',
      header: const ArcaneBadge(label: 'Popular', variant: BadgeVariant.accent),
    ),
  ],
)

Full Example#

ArcaneFeatureShowcase(
  title: 'Why Choose QualityNode?',
  subtitle: 'Hover over any card to learn more about our features.',
  expandedFlex: 2.5,
  collapsedFlex: 1.0,
  gap: '24px',
  minCardWidth: '280px',
  items: [
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.server(size: IconSize.xl),
      title: 'Enterprise Hardware',
      description:
          'All servers run on enterprise-grade hardware featuring the latest '
          'AMD EPYC and Intel Xeon processors, ECC memory, and NVMe SSDs.',
      footer: const ArcaneArrowLink(label: 'View specs'),
    ),
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.shield(size: IconSize.xl),
      title: 'DDoS Protection',
      description:
          'Every server includes enterprise-grade DDoS protection at no extra '
          'cost. Our multi-layer mitigation handles attacks up to 1+ Tbps.',
      footer: const ArcaneArrowLink(label: 'Learn more'),
    ),
    ArcaneFeatureShowcaseItem(
      icon: ArcaneIcon.zap(size: IconSize.xl),
      title: 'Ultra-Low Latency',
      description:
          'Strategic datacenter locations combined with premium network '
          'providers ensure the lowest possible ping for your players.',
      footer: const ArcaneArrowLink(label: 'Test latency'),
    ),
  ],
)

Related Components#

• ArcaneFlexiCards - Underlying card component
• ArcaneArrowLink - Footer links
• ArcaneHeroSection - Hero sections
• ArcaneSection - Generic sections